jQuery Toggle onClick Function not working as expected

Question

This is simple Toggle Function when I click on .myElement(height is auto) it expand my insider div and on 2nd click it is collapse.

so my problem is wherever I click on the .myElement it is collapsed I want it to collapse only while I click on signed field as on my Image file.

HTML:

<div class="myElement">
  <h4>Departments</h4>
  <div class="fil-content">
     <ul>
       <li><a href="/">Civil Engineering</a></li>
       <li><a href="/">Computer Engineering</a></li>
       <li><a href="/">Electrical - Electronics</a></li>
       <li><a href="/">Energy Systems</a></li>
       <li><a href="/">Industrial Engineering</a></li>
     </ul>
   </div>
</div>

CSS:

.myElement {
    width: 76%;
    height: auto;
    background-color: #f5f7f7;
    border: 1px solid #e4ebee;
    border-radius: 3px;
    text-align: left;
    line-height: 4vw;
    padding-left: 6%;
    padding-right: 6%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    cursor:pointer;
    margin-bottom: 1vw;
}
.myElement .fil-content {
    display: none;
    max-height:18vw;
    overflow:auto;
    width: 93.2%;
}

My Code:

 $('.myElement').click(function () {
     $(this).toggleClass('active');
     $(this).children('div').toggle(800);
 });

Image:

Instead of posting image, post relevant code to get minimalistic sample. I guess you could filter it regarding `event.target` or by stopping children div click event propagation or element having class or not, but it is quite hard to debug an... image! — A. Wolff, Feb 20 '16 at 09:53

Sim · Answer 1 · 2016-02-20T10:14:36.487

0

I would set the click event handler only on your h4 element.

var element = $('.myElement')
element.find("h4").click(function () {
  element.toggleClass('active');
  element.children('div').toggle(800);
});

here is a working fiddle: https://jsfiddle.net/jx6sawtt/

Update:

If you have more than one element and they all have the same structure, you can use this snippet:

$('.myElement').find("h4").click(function () {
  var el = $(this).parent();
  el.toggleClass('active');
  el.children('div').toggle(800);
});

Here you set the click event on every h4 element and then toggle the parent element of the clicked h4.

The updated fiddle: https://jsfiddle.net/4h3pbys6/

edited Feb 20 '16 at 10:14

answered Feb 20 '16 at 10:05

Sim

3,279
1
17
23

Thx for the answer I try that it works but I have 5 content as this so they all expand at the same time now. – ewtqwerscx Feb 20 '16 at 10:10
You're welcome, we are all beginners in something :) +1 for your edited question, it's excellent now. – Sim Feb 20 '16 at 10:21

score 0 · Answer 2 · edited Feb 20 '16 at 17:13

0

$('.myElement').click(function () {
    $(this).toggleClass('active');
    $(this).children('div').toggle(800);
    $('.fil-content').toggle();
});

edited Feb 20 '16 at 17:13

Jens A. Koch

39,862
13
113
141

answered Feb 20 '16 at 10:35

vijay

186
2
12

jQuery Toggle onClick Function not working as expected

2 Answers2