CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3262732
user3262732

Reputation: 256

display dd on click using jquery

I have dl in my page that contain multiple dt and dd.I just want to hide all dd except one when clicked on 'dt'. Basically i want to build horizontal nav bar.

this is the jsfiddle 

<dl class="dl-horizontal">
    <dt>Tabs 01</dt>
    <dd style="display:block;">
        <p>Content that is shown when tab 01 clicked</p>
    </dd>
    <dt>tab 02</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 02 clicked</p>
    </dd>
    <dt>tab 03</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 03 clicked</p>
     </dd>
     <span style="left: 222px; top: 28px; display: block;"></span>
</dl>

$(document).ready(function(){
        $('.dl-horizontal dt').click(function(){

            $('.dl-horizontal dt').removeClass('unactive')
            $(this).next().toggleClass('active');     

        });

});

so when i clicked on tab that tab content will shown.How can i do this using jquery

Upvotes: 0

Views: 2429

Answers (6)

Tien Nguyen
Tien Nguyen

Reputation: 599

Try this

http://jsfiddle.net/9kt6pdx5/14/

<div class="container">
<div class="row">
    <div class="tabs">
        <dl class="dl-horizontal">
            <dt>Tabs 01</dt>
            <dd>
                <p>Content that is shown when tab 01 clicked</p>
            </dd>
            <dt>tab 02</dt>
            <dd>
                <p>Content that is shown when tab 02 clicked</p>
            </dd>
            <dt>tab 03</dt>
            <dd>
                <p>Content that is shown when tab 03 clicked</p>
             </dd>
             <span style="left: 222px; top: 28px; display: block;"></span></dl>
    </div>
    <div class="clearfix visible-lg"></div>
</div>


$(document).ready(function(){
        var $dts = $('.dl-horizontal dt');
        $('.dl-horizontal').on('click', 'dt', function(){
             $dts.removeClass('active');
             $(this).addClass('active');


        });

    });

dd {
  display: none;
}
dt.active + dd{
  display : block;  
}

By clicking on dt class active will be added to the element. When class is added display: block will be applied to next dd because of CSS adjacent sibling selector, i.e. dt.active + dd

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

If you just want one open at a time, with no toggle closed, you don't even need classes. Just slide up "the others" (using not) and slide down the selection (or hide()/show() if you prefer a more jarring experience):

http://jsfiddle.net/TrueBlueAussie/9kt6pdx5/8/

$(document).ready(function () {
    $('.dl-horizontal dt').click(function () {
        var $dd = $(this).next('dd');
        $('.dl-horizontal dd').not($dd).slideUp();
        $dd.slideDown();
    });
});

notes:

  • Your original example has element style= attributes, which will always override class CSS styles you added. That is why it did not work.

Upvotes: 0

Legendary
Legendary

Reputation: 2242

<dl class="dl-horizontal">
<span class='test'>
    <dt>Tabs 01</dt>
    <dd style="display:block;">
        <p>Content that is shown when tab 01 clicked</p>
    </dd>
</span>
<span class='test'>
    <dt>tab 02</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 02 clicked</p>
    </dd>
</span>
<span class='test'>
    <dt>tab 03</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 03 clicked</p>
     </dd>
</span>
     <span style="left: 222px; top: 28px; display: block;"></span>
</dl>

    $(document).ready(function(){
            $('dt').click(function(){
            $this = $(this);
            $show_dd = $this.closest('.test').find('dd');
            $('.test dd').hide();
            $show_dd.show();

        });
    });

required jquery

Upvotes: 0

Saravanan Rajaraman
Saravanan Rajaraman

Reputation: 1033

You may try addClass and removeClass on click event

$(function(){
   //Event listener for <dt>
   $('dt').on('click',function({  
        //reset the inactive class to <dd>
        $('dd').addClass('inactive'); 
        //remove the inactive class and add active class 
        $(this).next('dd').removeClass('inactive').addClass('active');//method chaining           
   });    
});

Try this: jsfiddle

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

You can manipulate only the elements that need to be manipulated by adding the correct classes or pseudo selectors to the selector. I have added .active to the first dd because it is the active dd when the page loads.

$(document).ready(function(){
        $('.dl-horizontal dt').click(function(){

            $('dd.active:visible').hide().removeClass('active');
            $(this).next('dd').show().addClass( 'active' );

        });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<dl class="dl-horizontal">
    <dt>Tabs 01</dt>
    <dd style="display:block;" class="active">
        <p>Content that is shown when tab 01 clicked</p>
    </dd>
    <dt>tab 02</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 02 clicked</p>
    </dd>
    <dt>tab 03</dt>
    <dd style="display:none;">
        <p>Content that is shown when tab 03 clicked</p>
     </dd>
     <span style="left: 222px; top: 28px; display: block;"></span>
</dl>

Upvotes: 0

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2606

One class is enought. Take a look at this : http://jsfiddle.net/9kt6pdx5/3/

$('.dl-horizontal dt').click(function(){

    $(this).next().toggleClass('unactive');   

});

Upvotes: 0

Related Questions