toggle Jquery doesn't work

Question

I have an issue with jquery toggle, it does not toggle the current div but instead the next div of the current one, when I try to change the class of the toggle div it doesn't work at all. Can anyone help me please ?
P.S: I'm toggling the SITES block, I wrapped it's content (background: yellow) in the class="clsDashRegion_sitesBloc", when I put this class in my JS it does not work.

Here is my code

(function zipContentBloc($) {
  $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
   // Toggle the panel next to the item that was clicked
   $(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
  });
 })(jQuery);

/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
 position: absolute;
 top: 6%;
    right: 0.5rem;
 transform: translateY(-50%);
 font-size: 1.8rem;
}

/* Plus */
.clsDashRegion_zipIndicator::after {
 content: '\002B';
}

/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
 content: '\002D';
 font-size: 3rem;
}

.clsDashRegion_levelOne {
 width: 25rem;
 /* height: 100%; */
 background: #3c4647;
 position: relative;
}
.clsDashRegion_catgBloc {
 position: relative;
    left: 2%;
 width: calc(100% - 1rem);
 height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
 width: 100%;
 height: 100%;
 background-color: rgba(255,255,255,0.9);
    opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
 height: 2.5rem;
 background: aqua;
}
.clsDashRegion_catgLogoBloc {
 width: 2.5rem;
 height: 2.5rem;
 float: left;
}
.clsDashRegion_catgTitleBloc {
 float: left;
 width: calc(100% - 5.5rem);
 height: 2.5rem;
 color: #000000;
 font-weight: bold;
 font-size: 1.4rem;
 text-align: center;
 line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
 float: right;
 width: 3rem;
 height: 2.5rem;
 text-align: center;
 line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
 /* position: absolute; */
 /*float: none;*/
 display: block;
    float: right;
 width: 10rem;
 height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
 float: left;
 width: 5rem;
 height: 2.5rem;
 color: #000000;
 text-align: center;
    font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
 position: relative;
 float: right;
 display: block;
    width: 100%;
 height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
 float: left;
 width: 50%;
    height: 2.5rem;
 font-weight: bold;
 margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
 float: right;
 width: 5rem;
 height: 2.5rem;
 text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
 position: relative;
    float: left;
    display: block;
    width: 100%;
 height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
 position: relative;
    float: left;
    display: block;
    width: 100%;
 height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
 position: relative;
 float: left;
    top: 1rem;
    text-align: center;
}
.clsDashRegion_buttonValue {
 width: 5rem;
    height: 1.5rem;
 margin-left: 2rem;
    border: 1px solid;
    line-height: 1.4rem;
    background: chartreuse;
 border-style: groove;
}
.clsDashRegion_buttonTitle {
 margin-left: 1.5rem;
    line-height: 1.4rem;
 font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
 position: relative;
 float: right;
 display: block;
    width: 100%;
 top: 0.5rem;
 text-align: center;
 font-weight: bold;
}
.clsDashRegion_valueTech {
 float: left;
 width: calc(100% - 4rem);
 margin-bottom: 0.5rem;
 border-style: groove;
    letter-spacing: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
  <div class="clsDashRegion_levelOne">
   <div class="clsDashRegion_catgBloc">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">ALARMES</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_catgTNTFMBloc">
      <div class="clsDashRegion_catgTitleTNTFM">TNT</div>
      <div class="clsDashRegion_catgTitleTNTFM">FM</div>
     </div>
     <div class="clsDashRegion_catgInfoBloc">
      <div class="clsDashRegion_infoTitleBloc">Critique</div>
      <div class="clsDashRegion_infoValueBloc">V1</div>
      <div class="clsDashRegion_infoValueBloc">V2</div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:8em;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">TICKETS</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_wrapbuttonBlocTicket">
      <div class="clsDashRegion_catgbuttonBloc">
       <div class="clsDashRegion_buttonValue">V1</div>
       <div class="clsDashRegion_buttonTitle">En cours</div>
      </div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:20rem;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">SITES</div>
      <div class="clsDashRegion_zipIndicator"></div>
     </div>
     <div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
      <div class="clsDashRegion_catgTNTFMBloc">
       <div class="clsDashRegion_catgTitleTNTFM">TNT</div>
       <div class="clsDashRegion_catgTitleTNTFM">FM</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">-3dB</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Rx</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Perte HF</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_catgInfoBloc">
       <div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
       <div class="clsDashRegion_infoValueBloc">V1</div>
       <div class="clsDashRegion_infoValueBloc">V2</div>
      </div>
      <div class="clsDashRegion_wrapbuttonBlocGE">
       <div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
       <div class="clsDashRegion_catgbuttonBloc">
        <div class="clsDashRegion_buttonValue">V1</div>
        <div class="clsDashRegion_buttonTitle">En cours</div>
       </div>
       <div class="clsDashRegion_catgbuttonBloc">
        <div class="clsDashRegion_buttonValue">V2</div>
        <div class="clsDashRegion_buttonTitle">- 10 jrs</div>
       </div>
      </div>
     </div>
    </div>
   </div>
   
   <div class="clsDashRegion_catgBloc" style="height:18rem;">
    <div class="clsDashRegion_catgBlocBackground">
     <div class="clsDashRegion_catgHeaderBloc">
      <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
      <div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
      <div class="clsDashRegion_catgReduceBloc">
       <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
       <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
      </div>
     </div>
     <div class="clsDashRegion_catgbuttonBloc">
      <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
      <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
     </div>
    </div>
   </div>
  </div>
 </div>

might i recommend using id's as opposed to classes for use with javascript — Cookie, Jul 25 '17 at 10:00
@TheRickest i tried as you said id's but stil the same issue, i think the problem is in my code.. but can't figure it out — Zee, Jul 25 '17 at 10:08
that's just general life advice, id's over classes for js where you can help it just sorts out all kinds of headaches — Cookie, Jul 25 '17 at 10:31

score 1 · Accepted Answer · edited Aug 04 '17 at 20:38

1

Happens because you use extra selector with on('click', '.clsDashRegion_catgBloc',...

Try this:

    $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
        // Toggle the panel next to the item that was clicked
        $( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
    });

$(this) = $('.clsDashRegion_levelOne'); - block which you add .on();

$( event.target ) =$('.clsDashRegion_catgBloc'); - block which was exactly clicked

Fiddle example: https://jsfiddle.net/z4tdxmbk/ Check this also

edited Aug 04 '17 at 20:38

CDspace

2,639
18
30
36

answered Jul 25 '17 at 09:57

Constantine

544
5
15

thank's for your answer but still doesn't work ..it gives me this Uncaught SyntaxError: Unexpected identifier – Zee Jul 25 '17 at 10:03
@Zinebs Check example. May be it ll help to understand what happens – Constantine Jul 25 '17 at 10:04
i tried your answer without putting it inside the jquery function...it does work but not correctly..have you tried it to see the result ? – Zee Jul 25 '17 at 11:34
@Zinebs if it is actual, i can re-write jsfiddle for your code in question!! – Constantine Jul 25 '17 at 12:12

toggle Jquery doesn't work

1 Answers1