Toggleclass is not working

Question

I’m trying to create a list of elements with elements hidden inside each tag li. When you click on 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;
    }
}

Answer 1

Your selectors are aligned in the wrong way, see the example below as it should be (explanation commented 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>
<div class="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 doesn’t work

In this part:

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

You’re trying to walk as if there were several '.offer-list' instead of walking through 'li', thus, in this passage:

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

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

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

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

Answer 2

With jQuery no need 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 class .content that will cause the div be visible:

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

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

See 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>
<div class="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>