ToggleClass is not working

Navigation
2

I'm trying to create a list of elements with elements hidden inside each li tag. When you click the li, the hidden elements appear, but when I click again they do not close.

This is the JS code: 

$('.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;
    }
}
    
asked by anonymous 15.03.2018 / 00:10

2 answers

1

Your selectors are aligned wrongly, see the example below as it should be (explanation commented on in the snippet): 

 //Selecionando o elemento pai, e abrindo o loop pelas 'lis' dentro de 'offer-list'
$('.box-content-minhas-ofertas,  .offer-list').find('li').each(function(e) { 
   var li = $(this);

  //$(this) é cada 'li',, e em cada 'li' buscamos um '.title' para atribuir um evento 'click'
  $(this).find('.title').click(function(e){

    //Removemos a classe .open do outro elemento dentro de offer-list
    $('.box-content-minhas-ofertas,  .offer-list').find('.open').removeClass('open'); 

    //Adicionamos a classe open a proxima div dentro da li, ou seja, a div após .title 
    $(this).next('div').toggleClass('open');

  });

})
.open {
    .content{
        display: block;
        height: auto;
    }
    .content { 
        display: none; 
        height: 0; 
        padding: 5px 0 0 0;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box-content-minhas-ofertas">
<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>
</ul>
</div>

Explaining why your code does not work

In this part: 

$('.box-content-minhas-ofertas .offer-list').each(function(i, el) {

You're trying to loop through as if there were multiple '.offer-list' instead of going through 'li' , so in this section: 

$(el).find('.title').click(function(e) {

'el' is being assigned to .offer-list not offer , for this reason, the excerpt: 

$(el).find('.open').removeClass('open')
$(this).parent().toggleClass('open')

These methods will always be assigned to the same element, not doing what is expected, which is the switch between which content is open.

    
15.03.2018 / 01:47
0

With jQuery you do not have to loop .each to capture clicks on a collection of elements. Just select the collection and use .click : 

$('.box-content-minhas-ofertas .offer-list li').click(function(){
   $(this).find('.content').toggleClass('open');
});

Another problem is in the nested CSS you are using. The correct thing is to add the class .open to the class .content which will make div visible: 

.content.open{
  display: block;
  height: auto;
}

.content{ 
     display: none; 
     height: 0; 
     padding: 5px 0 0 0;
}

See it working: 

$('.box-content-minhas-ofertas .offer-list li').click(function(){
   $(this).find('.content').toggleClass('open');
});
.content.open{
  display: block;
  height: auto;
}

.content{ 
     display: none; 
     height: 0; 
     padding: 5px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="box-content-minhas-ofertas">
   <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>
   </ul>
</div>
    
15.03.2018 / 03:20
Use Linux libraries Problem Handling LocalDate Dates