CODEWITHSUNDEEP
jquery
The Naga Tanker
The Naga Tanker

Reputation: 441

Jquery slidetoggle automatic

I want the Slide toggle to collapse automatically when I click on second question. Right now the previous slidetoggle remains open. Also the code kicks in when the screen width is 700px.

Here is my code jquery code

jQuery(document).ready(function(){
jQuery(".answers").hide();
jQuery(".container h4").click(function(){
    jQuery(this).next(".answers").slideToggle();
});
jQuery(".container h4").addClass(".faq-answers");
});

I have tried this too for the window width

(window).resize(function() {
  console.log($( window ).width());
  var windowwidth = $( window ).width();
  if (windowwidth > 500) {
    jQuery(".answers").hide();
    jQuery(".container h4").click(function(){
      jQuery(this).next(".answers").slideToggle();
  }

});

The link to JSfiddle https://jsfiddle.net/bw6k874b/21/

Upvotes: 0

Views: 423

Answers (4)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

jQuery(document).ready(function() {
  jQuery(".answers").hide();
  jQuery(".container h4").click(function() {
    jQuery(".answers").hide(500); // first hide all, then show only its related answer, with animation
    jQuery(this).next(".answers").slideToggle(500);
  });
  jQuery(".container h4").addClass(".faq-answers");
});
.container {
  background-color: black;
  color: white;
}

.faq-answers {
  cursor: pointer;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <h4>
    Question 1
  </h4>
  <div class="answers">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <h4>
    Question 2
  </h4>
  <div class="answers">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <h4>
    Question 3
  </h4>
  <div class="answers">
    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.
    We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
  </div>

  <h4>
    Question 4
  </h4>
  <div class="answers">
    Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've
    known way back when... You know why, David? Because of the kids. They called me Mr Glass.
  </div>
</div>

Upvotes: 0

Mark
Mark

Reputation: 2063

if I dont understand wrongly:

  1. when you clicked an opened answer, then it will be closed.
  2. when you clicked a closed answer, then you will open it, while closing other Visible answers

That way, I add selector .siblings() in the answer, so that it would ONLY close Visible siblings (exclude self). By doing this, if the current answer is opened, it wont be closed by the first .slideToggle()

jQuery(document).ready(function(){
  jQuery(".answers").hide();
  jQuery(".container h4").click(function(){
   jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
   jQuery(this).next(".answers").slideToggle();
  });
  jQuery(".container h4").addClass(".faq-answers");
});

updated fiddle : https://jsfiddle.net/bw6k874b/27/

Upvotes: 1

Abdul Rafay
Abdul Rafay

Reputation: 807

slideUp all answers content on click:

jQuery(document).ready(function(){
 jQuery(".answers").hide();
 jQuery(".container h4").click(function(){
   jQuery(".answers").slideUp(); // -------- ADD THIS LINE
   jQuery(this).next(".answers").slideToggle();
 });
 jQuery(".container h4").addClass(".faq-answers");
});

updated fiddle: https://jsfiddle.net/bw6k874b/26/

Upvotes: 0

Aravind Sivam
Aravind Sivam

Reputation: 1099

Add class for the active answer and on other answer click, select using the previous answer using active class and hide the active element.

jQuery(document).ready(function() {
  jQuery(".answers").hide();
  jQuery(".container h4").click(function() {
    var activeAnswer = $('.answers.active');
    if (activeAnswer.length)
      $('.answers.active').slideToggle().removeClass('active');
    jQuery(this).next(".answers").slideToggle().addClass('active');
  });
  jQuery(".container h4").addClass(".faq-answers");
});

https://jsfiddle.net/qyp0vvv5/

Upvotes: 0

Related Questions