CODEWITHSUNDEEP
jqueryhtmlcss
rrrrrauno
rrrrrauno

Reputation: 51

JQuery Slide down/up - Display only one div from the same class name

I have created UL list, each LI has two DIVs - one visible question tab and one hidden answer tab. There is a button on the right side of the tabs (Question tab has SlideDown button, answer tab has SlideUp button). But once I click on these buttons, it shows all DIVs in the entire UL list. How can I display only the clicked content and let the remaining DIVs be hidden?

HTML looks as following:

<ul>
  <li>
    <div class="questionTab" id="firstTab">What is the natural color for Dory?
        <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span>
    </div>
    <div class="answerTab">Answer: It's blue. 
        <span class="slideUpButton" style="background-color: red">SLIDEUP</span>
    </div>
  </li>
</ul>

For this post, I excluded general layout such as paddings, margins, colors etc. 

.answerTab {
    display: none;
    }

And JQuery script looks like following which will currently open all tabs in UL:

 $(document).ready(function(){
        $(".slideDownButton").click(function(){
            $(".answerTab").slideDown("slow");
        });
    });
    $(document).ready(function(){
        $(".slideUpButton").click(function(){
            $(".answerTab").slideUp("slow");
        });
    });

However, based on some research some people had similar issue as me and I tried to make following adjustments to display only the clicked DIV, so it eventually looks like this, but it's not working. 

 $(document).ready(function(){
        $(".slideDownButton").click(function(){
            $(this).parent("li").find(".answerTab").slideDown("slow");
        });
    });
    $(document).ready(function(){
        $(".slideUpButton").click(function(){
            $(this).parent("li").find(".answerTab").slideUp("slow");
        });
    });

So I ask your help and advice. How can I improve the following code and what am I doing wrong? All help is appreciated.

Upvotes: 0

Views: 1255

Answers (1)

Dan Kreiger
Dan Kreiger

Reputation: 5516

Your first JQuery code works, except there are two errors.

  1. You only should call $(document).ready once at the beginning of the script. You should wrap your JQuery code with the $(document).ready function.
  2. You wrote: $(",answerTab").slideUp("slow"); - the class name answerTab should have a period, not a comma. So it should be written like so: $(".answerTab").slideUp("slow");

Below is a working version of your code. You can also check out this CodePen Demo. I hope this helps.

$(document).ready(function() {
  $(".slideDownButton").click(function() {
    $(".answerTab").slideDown("slow");
  });
  $(".slideUpButton").click(function() {
    $(".answerTab").slideUp("slow");
  });
});
.answerTab {
  display: none;
}
<ul>
  <li>
    <div class="questionTab" id="firstTab">What is the natural color for Dory?
      <span class="slideDownButton" style="background-color: red">SLIDEDOWN</span>
    </div>
    <div class="answerTab">Answer: It's blue.
      <span class="slideUpButton" style="background-color: red">SLIDEUP</span>
    </div>
  </li>
</ul>


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

For multiple list items with questions and answers, you can traverse the DOM with the JQuery methods parent and next like so:

$(document).ready(function() {
  $(".slideDownButton").click(function() {
    $(this).parent(".questionTab").next(".answerTab").slideDown("slow");
  });
  $(".slideUpButton").click(function() {
    $(this).parent(".answerTab").slideUp("slow");
  });
});
.answerTab {
  display: none;
}

li {
  padding-top: 1rem;
}

span {
  background-color: red;
}

span:hover {
  cursor: pointer;
  background-color: #E00;
}
<ul>
  <li>
    <div class="questionTab">What is the natural color for Dory?
      <span class="slideDownButton">SLIDEDOWN</span>
    </div>
    <div class="answerTab">Answer: It's blue.
      <span class="slideUpButton">SLIDEUP</span>
    </div>
  </li>
  <li>
    <div class="questionTab">What is the natural color for Woof?
      <span class="slideDownButton">SLIDEDOWN</span>
    </div>
    <div class="answerTab">Answer: It's brown.
      <span class="slideUpButton">SLIDEUP</span>
    </div>
  </li>
  <li>
    <div class="questionTab">What is the natural color for Wolf?
      <span class="slideDownButton">SLIDEDOWN</span>
    </div>
    <div class="answerTab">Answer: It's grey.
      <span class="slideUpButton">SLIDEUP</span>
    </div>
  </li>
</ul>

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

Upvotes: 1

Related Questions