Toggle display on click jQuery

Question

I have an accordion that...

When clicked i want the next dd section to expand.
If another is clicked i want all the other open sections to close first
If an open title is clicked Id like to close...

I have the following example that I cant get working...

jQuery

$(".accordion > dt > a").click(function () {
    $(".accordion a").removeClass('active');
    if ($('.accordion > dd').next().is(':visible')) {
        $(this).removeClass('active');
        $('.accordion > dd').slideUp(200);
    } else {
        $(this).addClass('active');
        $(this).parent().next().slideDown();
    }
});

http://jsfiddle.net/m0zehxpc/

I think one of the problems is that you are not allowing the else condition to work. And also the last rule is your CSS looks faulty. — Nikhil Girraj
– Nikhil Girraj, Commented Jun 10, 2015 at 7:17

Guruprasad J Rao · Accepted Answer · 2015-06-10 07:11:22Z

1

Something like this

$(".accordion > dt > a").click(function () {
    $(".accordion a").removeClass('active');
    $(this).addClass('active');
    $('.accordion > dd').not($(this)).slideUp(200);
    $(this).parent().next('dd').slideDown(200)
});

You can just ignore .not part in this

$('.accordion > dd').not($(this)).slideUp(200);

edited Jun 10, 2015 at 7:11

answered Jun 10, 2015 at 7:05

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

PHP dev Over a year ago

May i know the meaning of $('.accordion > dd').not($(this)).slideUp(200);

Guruprasad J Rao Over a year ago

@papsk Except the clicked element's dd slide up all the other dd but that seemed irrelavant here as he has close everything first and then open the clicked one.

PHP dev Over a year ago

Thank you ji...but i can't understand this...initially all are closed only na...then why it is irrelevant

Guruprasad J Rao Over a year ago

@papsk It will be useful when you open one accordion and when you click other you might need to close the opened one!

Guruprasad J Rao Over a year ago

not(":even") does not consider the elements which are at even index when referred from their parent!!

|

halfer · Accepted Answer · 2020-02-16 12:27:47Z

0

I have fixed few things in your code and now it works like any other standard accordion.

JS Code :

 $(".accordion > dt > a").click(function () {
 var $this = $(this);
 var content = $this.parent().next();
 if (!$this.hasClass('active')) {
     $(".accordion a").removeClass('active');
     $('.accordion > dd').slideUp(200);
     $this.addClass('active');
     content.slideDown();
 } else {
     $this.removeClass('active');
     content.slideUp(200);
 }
});

Live Demo @ JSfiddle:

http://jsfiddle.net/dreamweiver/m0zehxpc/12/

edited Feb 16, 2020 at 12:27

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jun 10, 2015 at 7:27

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Comments

Norlihazmey Ghazali · Accepted Answer · 2015-06-10 07:09:45Z

Try this code :

$(".accordion > dt > a").click(function () {
     var $myDD = $(this).parent().next();
     $(".accordion a").removeClass('active');
     $(this).addClass('active');
     $('dd').slideUp();
     
     if ($myDD.is(':visible')) 
         $myDD.slideUp();
     else 
         $myDD.stop().slideDown();
 });

.about-us .accordion {
    padding: 0 1.6em;
    max-width: 970px;
    margin: 0 auto 50px auto;
}
.about-us .accordion dt {
    margin: 0 0 5px 0;
}
.about-us .accordion dt a {
    background:#EDEFEF no-repeat scroll right 0px !important;
    color: #4e5663;
    display: block;
    text-transform: uppercase;
    padding: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}
.about-us .accordion dd {
    display: none;
    padding: 20px;
    margin: -7px 0 5px 0;
    border: 2px solid #00b0e4;
}
body.about-us .accordion a.active {
    background:#00B0E4 no-repeat scroll right -67px!important;
    color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="about-us">
    <dl class="accordion"> <dt>
            <a href="#title">Title</a>
        </dt>

        <dd style="">
            <p>lorem upsum dolor sit amet</p>
        </dd> <dt>
            <a href="#title">Title</a>
        </dt>

        <dd style="">
            <p>lorem upsum dolor sit amet</p>
        </dd> <dt>
            <a href="#title">Title</a>
        </dt>

        <dd style="">
            <p>lorem upsum dolor sit amet</p>
        </dd> <dt>
            <a href="#title">Title</a>
        </dt>

        <dd style="">
            <p>lorem upsum dolor sit amet</p>
        </dd> <dt>
            <a href="#title">Title</a>
        </dt>

        <dd style="">
            <p>lorem upsum dolor sit amet</p>
        </dd>
    </dl>
</div>

Mohit · Accepted Answer · 2015-06-10 07:12:27Z

0

There are much answers already.However you can try this code at thisfiddle http://jsfiddle.net/m0zehxpc/2/

var datapanel = $('.accordion > dd').hide(); 
$('.accordion > dt > a').click(function() {
 datapanel.slideUp(200);
 $(this).parent().next().slideDown();
 return false;
});

answered Jun 10, 2015 at 7:12

Mohit

5592 silver badges8 bronze badges

Comments

Rajesh Shetty · Accepted Answer · 2015-06-10 09:12:30Z

0

  $("dt").click(function () {     
  $('dd').slideUp();
  $(this).next('dd').slideDown();
 });

edited Jun 10, 2015 at 9:12

Rajesh Shetty

961 silver badge8 bronze badges

answered Jun 10, 2015 at 7:06

stanze

2,47814 silver badges14 bronze badges

Collectives™ on Stack Overflow

Toggle display on click jQuery

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related