Question

I have these divs with slideToggle and I need to change from + to - when they are clicked, but I'm not getting evenly..

I would like that when I clicked on the enclosed div she removed the minus class, but can not in any way

HTML:

<div class="equipamentos-div">
<h2 class="equipamentos-title">Luzes</h2>
<div><p>4 Fla shes Style 600 RX (Elinchrom)</p></div>
</div>

<div class="equipamentos-div">
<h2 class="equipamentos-title">Difusores</h2>
<div><p>2 Hazy Light/ Rotalux Softbox 35x90 cm (Elinchrom)</p></div>
</div>

CSS:

#content .content-equipamentos h2{color:#808080;font-size: 18px;text-transform: none;cursor: pointer;margin: 0;}
#content .content-equipamentos h2:hover{color: #000;}
#content .content-equipamentos h2:after{content:' +';}
#content .content-equipamentos h2.minus{color:#000;}
#content .content-equipamentos h2.minus:after{content:' -';}
#content .content-equipamentos div div{display: none;}
#content .content-equipamentos p{margin-bottom: 10px !important;}

JQUERY:

$('.equipamentos-title').click(function () {
  $(this).next('div').slideToggle();
  $(this).parent().siblings().children().next().slideUp().removeClass('minus');
  $(this).toggleClass('minus'); 
  return false;
});

EXAMPLE CODE

Was it helpful?

Solution

Use

  $(this).parent().siblings().children().removeClass('minus').next().slideUp();

DEMO

Here, $(this).parent().siblings().children() refers to <h2> element. Add you need to remove class from this element. Currently you are removing class from div following <h2> that you slide up.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top