Toggle Div which is inside another div(display none)

Question

I have a menu button. The menu appears on click. Currently on click I am able to display the entire menu which has 4 categories, But I want to display only the menu headings on first click, And again on clicking the menu headings, that particular category contents should appear.

How do i achieve this

Here's my HTML

<div class="container-fluid dropdown_menu" style="display: none;" >
                <div class="row">
                    <div class="col-sm-3 menu_column">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Hospitals </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Diagnostics </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Clinics </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Alternative Health Care </span> </a> </li>
                            </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 menu_column">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Doctor Appointments </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Health Package booking </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Medical Test Scheduling </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Home Sample Collection </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Home Consultation </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Treatment Advice </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Ambulance </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Cab pick up </span> </a> </li>
                            </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 menu_column">
                        <div class="row">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                         <div class="row">
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Health News </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Reviews </span> </a> </li>

                            </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3 menu_column" style="border: none;">
                        <div class="row ">
                            <div class="col-xs-12 menu_head">
                                <h2> Health Centers </h2> </div> 
                        </div>
                        <div class="row" >
                            <div class="col-xs-12">
                                <hr class="menu_head_divider">
                            </div>
                        </div>
                        <div class="row" id="menu_content">
                            <div class="col-xs-12">
                            <ul class="list-unstyled">
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Buzz Hospital app </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Buzz Pharma app </span> </a> </li>
                                <li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item"> Parenting app </span> </a> </li>

                            </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

and here's my Jquery

$(document).ready(function () {
    $("#menu").click(function () {
        $(".dropdown_menu").toggle();
        $(".menu_content").css("display", "none");
    });
});

Your HTML markup is invalid, IDs must be unique on document context. In your code `menu-content` is an ID, not a class, it should be: `
` — A. Wolff, Aug 12 '15 at 09:45
Where is the id `#menu` here? And then mouse events will not work for hidden and disabled elements. Refer this http://stackoverflow.com/questions/3100319/event-on-a-disabled-input — John R, Aug 12 '15 at 10:02

score 0 · Answer 1 · answered Aug 12 '15 at 10:15

You can check with the below link might help you.

Fiddle

    $(document).ready(function(){
    $('.head').click(function() {
        $(this).siblings('.body:first').toggle('slow')
  });

    $('.head2').click(function() {
        $(this).siblings('.body2:first').toggle('slow')
  });

    $('.head3').click(function() {
        $(this).siblings('.body3:first').toggle('slow')
  });

    $('.head4').click(function() {
        $(this).siblings('.body4:first').toggle('slow')
  });
});

Toggle Div which is inside another div(display none)

1 Answers1