The div is having double click problem after the first click

Question

When clicking on each div it should increase in size, add another paragraph and close the other div if its opened, like a card.

It's working but I'm having to click twice to open it after the second click and I wanted it to work with just one click.

When I click one time in the first div it opens as expected, then I click on the second div and it also opens as expected, but then when I click in the first div again I end up having to click it twice to open.

$('.promoItemAlimento').on('click', function() {
  if (!$(this).data('clicked')) {
    //do your stuff here if the button is not clicked
    $(this).removeClass('card-ativo1');
    $(".promoItemAlimento-naoativo").css("display", "none");
    $(this).data('clicked', true);
  } else {
    //do your stuff here if the button is clicked
    $(this).toggleClass('card-ativo1');
    $(".promoItemAlimento-naoativo").css("display", "block");
    $(this).data('clicked', false);
  }
});

$('.promoItemTreino').on('click', function() {
  if (!$(this).data('clicked')) {
    //do your stuff here if the button is not clicked
    $(this).removeClass('card-ativo2');
    $(".promoItemTreino-naoativo").css("display", "none");
    $(this).data('clicked', true);
  } else {
    //do your stuff here if the button is clicked
    $(this).toggleClass('card-ativo2');
    $(".promoItemTreino-naoativo").css("display", "block");
    //closes other card
    $(".promoItemAlimento-naoativo").css("display", "none");
    $(".promoItemAlimento").removeClass("card-ativo1")
    $(this).data('clicked', false);
  }
});

.contentPromos {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.promoItemAlimento,
.promoItemTreino {
  height: 390px;
  width: 33.33%;
  text-align: center;
  background-color: #f7afaf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}

.promoItemAlimento-naoativo,
.promoItemTreino-naoativo {
  display: none;
}

.card-ativo1,
.card-ativo2 {
  height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<section class="contentPromos">
  <div class="promoItemAlimento" data-clicked="true">
    <h3>Plano Alimentar individualizado</h3>
    <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p>
    <div class="promoItemAlimento-naoativo">
      <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p><br><br>
      <a class="contentPromos-btn" href="#" type="submit" onclick="vai()">EU QUERO RESULTADOS</a>
    </div>
  </div>
  <div class="promoItemTreino" data-clicked="true">
    <h3>Treinos personalizados</h3>
    <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser. </p>
    <div class="promoItemTreino-naoativo">
      <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser.</p><br><br><br><br>
      <a class="contentPromos-btn" href="#" type="submit" onclick="vai()">EU QUERO RESULTADOS</a>
    </div>
  </div>
</section>

Answer 1

The issue is due to the data attribute value not being reset correctly when you hide the content.

However you can simplify and DRY your logic by using the same class on the 'card' and inner content elements. Then you can simply use JS to toggle the class on the clicked element, and use CSS rules to hide/show the inner content based on that class:

const $cards = $('.card').on('click', e => {
  const $card = $(e.currentTarget);
  $card.toggleClass('ativo');
  $cards.not($card).removeClass('ativo');
});

$('a.contentPromos-btn').on('click', e => {
  e.preventDefault();
  vai();
}); 

const vai = () => console.log('do something...');

.contentPromos {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.card {
  height: 390px;
  width: 33.33%;
  text-align: center;
  background-color: #f7afaf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
}

.card .content {
  display: none;
}

.card.ativo {
  height: 600px;
}

.card.ativo .content {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<section class="contentPromos">
  <div class="card">
    <h3>Plano Alimentar individualizado</h3>
    <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p>
    <div class="content">
      <p>Tenha consultas mensais com a nutricionista para montar planos alimentares de acordo com suas necessidades, preferências e objetivos. </p><br><br>
      <a class="contentPromos-btn" href="#" type="submit">EU QUERO RESULTADOS</a>
    </div>
  </div>
  <div class="card">
    <h3>Treinos personalizados</h3>
    <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser. </p>
    <div class="content">
      <p>Tenha também planos de exercícios adaptados à sua rotina e de acordo com suas atividades de preferência, para realizar quando e onde quiser.</p><br><br><br><br>
      <a class="contentPromos-btn" href="#" type="submit">EU QUERO RESULTADOS</a>
    </div>
  </div>
</section>

Note that the single event handler above will work for an infinite number of cards, so long as the .card and .content classes are applied correctly.

Finally, I removed the inline onclick attribute as it's not good practice. Attach your event handlers unobtrusively - exactly as you did for the card elements.