Eu estou tentando criar uma lista de elementos com elementos escondidos dentro de cada tag li. Quando clica na li, os elementos escondidos aparecem, porém quando clico de novo eles não fecham.
Esse é o código JS:
$('.box-content-minhas-ofertas .offer-list').each(function(i, el) {
$(el).find('.title').click(function(e) {
$(el).find('.open').removeClass('open')
$(this).parent().toggleClass('open')
})
})
HTML:
<ul class="offer-list">
<li class="offer">
<div class="title">Liberty Web 10GB
<img src="images/arrow-down-select.png" data-src-ac="images/arrow-down-select-ac.png" alt="Seta" class="arrow-down">
</div>
<div class="content">
<div class="description">Plano com franquia de 10GB para acesso a Internet. possibilita recontratar uma franquia de 1GB de dados após atingir 100% de consumo da franquia original.</div>
<div class="action">
<div class="price">R$119,90</div>
<button onclick="modal_Ofertas_Contratar()">Contratar oferta</button>
</div>
</div>
</li>
<li class="offer">
<div class="title">Liberty Web 10GB
<img src="images/arrow-down-select.png" data-src-ac="images/arrow-down-select-ac.png" alt="Seta" class="arrow-down">
</div>
<div class="content">
<div class="description">[MODAL ERRO] Plano com franquia de 10GB para acesso a Internet. possibilita recontratar uma franquia de 1GB de dados após atingir 100% de consumo da franquia original.</div>
<div class="action">
<button onclick="modal_Ofertas_Contratar_Erro()">Contratar oferta</button>
</div>
</div>
</li>
CSS:
.open {
.content{
display: block;
height: auto;
}
.content {
display: none;
height: 0;
padding: 5px 0 0 0;
}
}
Ctrl + m
– Costamilam 14/03/18 às 23:26