CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-lists
Alex Beyer
Alex Beyer

Reputation: 147

JQuery hide/show not working as it should

I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.

Here is my JQuery code:

$(document).ready(function(){
        $("#timeli").click(function(){
        $("#timeUlSub").hide();
    });});

And this is my html code that I am trying to get to hide/show

<div class="timeline">
            <ul>
                <li id="timeli">1996
                    <ul id="timeUlSub">
                        <li>
                            <p class="timeline-date">1997</p>
                            <p class="timeline-description">This is in the submenu</p>
                        </li>
                    </ul>
                </li>
                <li>1999</li>
                <li>2000</li>
                <li>2004</li>
                <li>2006</li>
                <li>2007</li>
            </ul>
        </div>

Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.

Upvotes: 0

Views: 786

Answers (5)

Shelly
Shelly

Reputation: 351

<div class="timeline">
     <ul>
         <li id="timeli">1996
         <ul id="timeUlSub">
            <li>
               <p class="timeline-date">1997</p>
               <p class="timeline-description">This is in the submenu</p>   
            </li>
         </ul>
         </li>
         <li>1999</li>
         <li>2000</li>
         <li>2004</li>
         <li>2006</li>
         <li>2007</li>
   </ul>
</div>

#timeUlSub{
        display:none;
}

$(document).ready(function(){
        $("#timeli").click(function(){
        $("#timeUlSub").toggle();
});});

jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/

Upvotes: 0

Chirag Patel
Chirag Patel

Reputation: 512

Try this out for conditional usage : 

 $(document).ready(function(){

     $("#timeli").on('click', function(){
        if($("#timeUlSub").is(':hidden')){
           $("#timeUlSub").show();  
        } else {
           $("#timeUlSub").hide();  
        }  
     });

 });

Upvotes: 0

Vim
Vim

Reputation: 559

$(document).ready(function(){
        $("#timeli").on('click', function()
          {
              $("#timeUlSub").toggle();          
          });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
            <ul>
                <li id="timeli">1996
                    <ul id="timeUlSub">
                        <li>
                            <p class="timeline-date">1997</p>
                            <p class="timeline-description">This is in the submenu</p>
                        </li>
                    </ul>
                </li>
                <li>1999</li>
                <li>2000</li>
                <li>2004</li>
                <li>2006</li>
                <li>2007</li>
            </ul>
        </div>

Upvotes: 1

yaakov
yaakov

Reputation: 4655

#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().

Check if you have Jquery linked.

Upvotes: 0

Michael Doye
Michael Doye

Reputation: 8171

Using toggle() may be more effective:

    $("#timeli").click(function(){
        $("#timeUlSub").toggle();
    });

Example Fiddle

Upvotes: 2

Related Questions