CODEWITHSUNDEEP
javascriptjqueryhtmlcss
eiei0
eiei0

Reputation: 54

If jquery slideToggle element is toggled then hide all other elements

I am very inexperienced with jquery/javascript and am trying to limp my way through this one. I have found other posts that advise on how to accomplish something similar to what I am trying to do but my knowledge on javascript syntax is so limited. If anyone could help I would appreciate it a ton.

What I am trying to do is pretty simple. If there is a <div> that is open, hide all others. Below is what I have accomplished so far.

index

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">

        <div id="hidden1"><h3>+ Heading 3</h3></div>
        <div class="showtext1">
          <p>Example text one</p>
        </div>

        <div id="hidden2"><h3>+ Heading 2</h3></div>
        <div class="showtext2">
          <p>Example text two</p>
        </div>

        <div id="hidden3"><h3>+ Heading 3</h3></div>
          <div class="showtext3">
            <p>Example text three</p>
          </div>

        </div>
      </div>
    </div>
</section>

javascript

$(function() {
    $('.showtext1')
        .hide();
});
$(document).ready(function() {
    $('#hidden1').click(function() {
        $('.showtext1').slideToggle("slow");
    });
});
// .showtext2
$(function() {
    $('.showtext2')
        .hide();
});
$(document).ready(function() {
    $('#hidden2').click(function() {
        $('.showtext2').slideToggle("slow");
    });
});
// .showtext3
// $(function() {
//     $('.showtext3')
//         .hide();
// });
$(document).ready(function() {
    $('#hidden3').click(function() {
        $('.showtext3').slideToggle("slow");
    });
});

Upvotes: 1

Views: 1800

Answers (2)

Dhiraj
Dhiraj

Reputation: 1871

Let's make your code dynamic so that you don't need to worry about adding more jQuery code if your list grew from 3 items to 4 or many. Also, if there's plus (+) sign to indicate that there's more content, then the plus should turn into minus(-) to indicate that you can collapse the displayed content now for better user experience. JSFIDDLE DEMO

HTML

<div class="accordion">
  <dl>
    <dt><h3><span>+</span> Heading 3</h3></dt>
    <dd><p>Example text one</p></dd>
    <dt><h3><span>+</span> Heading 2</h3></dt>
    <dd><p>Example text two</p></dd>
  </dl>
</div>

JS

$(function() {
    $('.accordion dd').filter(':nth-child(n+4)').hide();
    $('.accordion dl').on('click', 'dt', function() {
       $('.accordion dd').hide();
       $(this).siblings("dt").find("span").text("+");
       $(this).find("span").text("-");
       $(this).next().slideDown();
    });
});

Upvotes: 3

Asad Feroz Ali
Asad Feroz Ali

Reputation: 362

You do not need to use so many div elements uselessly since bootstrap requires you to add several divs for layout.

Code Explanation:

  1. When the document loading is completed lets slideUp all p elements.
  2. When a h3 is clicked, let's find the p element next to it and slide it down. Using slide toggle helps to hide the p element when that same h3 is clicked again.
  3. The functioning of second line in the click function will be clear with the following scenario. So firstly if you click on a h3 the p element sides down. But when you click on another h3 after that. The not function targets all the p elements other than the currently clicked p element and slides all of them up. So rememeber the p element of the firstly clicked h3 is still showing up so we need to hide that when you click on another h3 in your second click.

Hope that explanation helps understanding the code.

Modiefied HTML (removing un necessary divs)

<section class="about" id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h3>+ Heading 1</h3>
        <p>Example text one</p>
        <h3>+ Heading 2</h3>
        <p>Example text two</p>
        <h3>+ Heading 3</h3>
        <p>Example text three</p>
       </div>
      </div>
   </div>
</section>

Modiefied JS

$(document).ready(function(){
  $("p").slideUp();
  $("h3").click(function(){
    $(this).next("p").slideToggle("slow");
    $("p").not($(this).next("p")).slideUp();
  });
});

Check out this codepen with the solution. http://codepen.io/anon/pen/wGzgBd

Upvotes: 2

Related Questions