Simple jQuery div toggle not working

Question

I'm new to JavaScript, and I'm trying to create a simple hide and show div toggle, though it's not working. I'm not sure what the issue is -- I have the div initially display:none, then when the course-info-toggle class is clicked, it should turn to display:block, and transition down.

Any ideas?

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {
    $('.toggle-content').toggleClass('.show');
  });
});

.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

Define "not working". Do you get any errors in the browse'rs console? — j08691, Sep 05 '17 at 03:47
This `transition: left 0.3s linear;` works only if left property is defined in initial and final rules. — c-smile, Sep 05 '17 at 03:47
change $('.toggle-content').toggleClass('.show') to $('.toggle-content').toggleClass('show') — gjijo, Sep 05 '17 at 03:50
Confused. What have you changed regarding animated transition in the code? — Shaz, Sep 05 '17 at 04:18
Removed display. Added visibility. And opacity. Created a keyframe. Called that keyframe from animation property. You can read more on transitions at http://css3.bradshawenterprises.com/transitions/ — Amit Kumar Singh, Sep 05 '17 at 04:22

Amit Kumar Singh · Accepted Answer · 2017-09-05T04:20:25.143

Remove the dot in the toggleClass

It should be

$('.toggle-content').toggleClass('show');

and not like .toggleClass('.show')

You want to add animation and transition both, it seems. Use keyframes for animation. Display property does not appear to be working with transition.

Css transition from display none to display block, navigation with subnav

Slide in from left CSS animation

Solution: You can change your css classes to this. Now, you can work over on it in different ways.

.toggle-content.show {
   visibility: visible;
     position: relative;
   opacity: 1;
     animation: leftSlide 2s forwards;
}

.toggle-content {
 opacity: 0;
  visibility: hidden;
  background-color: #eeeeee;
  transition: opacity 5s, visibility 2ms;
}

@keyframes leftSlide {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}

To make it slide down, you can use translateY.

score 1 · Answer 2 · answered Sep 05 '17 at 03:49

You need to change .show to only show & add !important to display:block

/* Toggle on course detail sections */
$(document).ready(function() {
  $('.course-info-toggle').click(function() {

    $('.toggle-content').toggleClass('show');
  });
});

.toggle-content.show {
  display: block !important;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

score 0 · Answer 3 · answered Sep 05 '17 at 03:48

0

Change this line

$('.toggle-content').toggleClass('.show');

to line

$('.toggle-content').toggleClass('show');

answered Sep 05 '17 at 03:48

Lalit

1,354
1
8
13

semuzaboi · Answer 4 · 2017-09-05T03:51:21.807

0

It is working as it should, unless i am mistaken and this is not a typo

$('.toggle-content').toggleClass('.show');

You should not be using '.show' it should be

$('.toggle-content').toggleClass('show');

You dont have to use .class name as per docs . It is working properly IMHO if you do this.

you can check out the fiddle here . Didnt make any changes except the one mentioned above.

edited Sep 05 '17 at 03:51

answered Sep 05 '17 at 03:48

semuzaboi

4,972
5
20
35

Okay, works, but doesn't do the transition as defined in the css class?? – Shaz Sep 05 '17 at 03:51

score 0 · Answer 5 · answered Sep 05 '17 at 03:50

$(document).ready(function() {
 $('.course-info-toggle').click(function() {
  $('.toggle-content').toggleClass('show');
 });
});

.toggle-content.show {
 display: block;
    transition: left 0.3s linear;
}

.toggle-content {
 display: none;
 background-color: #eeeeee;
 padding: 1rem;
 margin-right:1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
 <div class="course-info-toggle">
  <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
  <img src="img/course-down-arrow.png" align="course-down-arrow">
 </div>
 <div class="toggle-content">
  <p>simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
  <p>simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
  </p>
 </div>                          
</div>

score 0 · Answer 6 · answered Sep 05 '17 at 03:50

0

toggleClass accepts a string so please use the following:

.toggleClass('show');

answered Sep 05 '17 at 03:50

itacode

3,721
3
21
23

score 0 · Answer 7 · answered Sep 05 '17 at 03:51

/* Toggle on course detail sections */
$('.course-info-toggle').click(function() {
  $('.toggle-content').toggleClass('show');
});

.toggle-content.show {
  display: block;
  transition: left 0.3s linear;
}

.toggle-content {
  display: none;
  background-color: #eeeeee;
  padding: 1rem;
  margin-right: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-wrap">
  <div class="course-info-toggle">
    <p id="course-details-toggle-font">COURSE OBJECTIVES</p>
    <img src="img/course-down-arrow.png" align="course-down-arrow">
  </div>
  <div class="toggle-content">
    <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      <p> simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled”<br>
      </p>
  </div>
</div>

Simple jQuery div toggle not working

7 Answers7