On click show or hide the children links in javascript or jquery

1
votes

I need a help for the side menu navigation.

On click of main menu "Divisions" link, i should show the child elements, which are link1, link2, link3 etc.

If i click again main menu "Divisions" link,child items should be hided (link1, link2, link3 should be Hided).

I have tried so far in javascript

var x = document.getElementById("p968").className = "classToKeep";

and CSS to hide

.classToKeep{
      color:#fff;
      }
       .classToKeep ul{
      display:none;
      }

But not succesful, How to do that in jquery or Javascript.

Can ayone help on this Please.

Please check this JS FIDDLE Link: http://jsfiddle.net/a3x004fs/

HTML

<ul class="vlist">
  <li id="p968" class="active">
    <strong>Divisions</strong>
    <ul>
      <li id="p981"><a href="link1.html" >link1</a></li>
      <li id="p982"><a href="link2.html" >link2</a></li>
      <li id="p983"><a href="link3.html" >link3</a></li>
      <li id="p1064"><a href="link4.html" >link4</a></li>
    </ul>
  </li>
  <li id="p969"><a href="#">mainlink2</a></li>
  <li id="p96955"><a href="#">mainlin3</a></li>
  <li id="p989"><a href="#">mainlink4</a></li>
</ul>

CSS

@media all
{
    /* title */
    h6.vlist {
        font-weight:bold;
        font-size:100%;
        width:90%;
        padding:3px 0px 3px 10%; /* LTR */
        margin:0;
        color:#444;
        background-color:#fff;
        border-top:2px #ddd solid;
        border-bottom:4px #888 solid;
    }

    .vlist {
        width:100%;
        overflow:hidden;
        margin:0 0 1.5em 0;
        list-style-type:none;
    }

    .vlist ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }

    .vlist li {
        float:left; /* LTR */
        width:100%;
        margin:0;
        padding:0;
    }

    .vlist a,
    .vlist strong,
    .vlist span {
        display:block;
        padding:3px 0px 3px 10%;
        text-decoration:none;
        border-bottom:1px #ddd solid;
    }

    .vlist a,
    .vlist a:visited {
        color:#444;
        text-decoration: none;
    }



    /* active list element */
    .vlist li.active {
        color:#fff;
        background-color:#800;
        font-weight:bold;
    }

    /* Level 1 */
    .vlist li a,
    .vlist li strong,
    .vlist li span { width:95%; padding-left:5%; } /* LTR */

    .vlist li a:focus,
    .vlist li a:hover,
    .vlist li a:active { background-color:#a88; color:#fff; outline: 0 none; }

    /* Level 2 */
    .vlist li ul li a,
    .vlist li ul li strong,
    .vlist li ul li span { width:95%; padding-left:5%; } /* LTR */

    .vlist li ul li a, 
    .vlist li ul li a:visited { background-color:#f8f8f8; color:#333; }
    .vlist li ul li a:focus,
    .vlist li ul li a:hover,
    .vlist li ul li a:active { background-color:#a88; color:#fff; }
4
javascriptjqueryhtmlcss

4 Answers

2
votes

Do add script jQuery to your head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use jQuery to show hide menu. 

$('li').on('click',function(e){
    var that = $(this);
    if(that.parents('ul').length>1){
        e.stopPropagation()
        return true;
    }else if(that.find('ul').length>0){
        that.toggleClass('classToKeep')
    }
});

Edit 2:

Completely forgot you actually have to click the children <li> elements. Ok the code is same just if it is a children li just dont let the event propagate to the parent thats all. Updated Fiddle

Working DEMO : Updated JS Fiddle

1
votes

Another way is to simple add a class to display your ´li's´ you had previusly hidden with display:noneand then add this jquery:

$('.active').click(function () {
                $('.link').toggleClass("hidden"); 
            });

I have added to class "link" to the li'syou want to be hidden.

JSFIDDLE

1
votes
You can simply use toggl function of jquery:- 



$("#p968").toggle(function () {
        $('#tackle').hide();
    }, function () {
        $('#tackle').show();
    });

<ul class="vlist">
    <li id="p968" class="active"><strong>Divisions</strong>
        <ul id="tackle">
            <li id="p981"><a href="link1.html">link1</a></li>
            <li id="p982"><a href="link2.html">link2</a></li>
            <li id="p983"><a href="link3.html">link3</a></li>
            <li id="p1064"><a href="link4.html">link4</a></li>
        </ul>
    </li>
    <li id="p969"><a href="#">mainlink2</a></li>
    <li id="p96955"><a href="#">mainlin3</a></li>
    <li id="p989"><a href="#">mainlink4</a></li>
</ul>
1
votes

Add this both code block for css and JS in your code.

.classToKeep{
     color:#fff;
  }
   .classToKeep ul{
      display:none;
  } 

$("#p968").click(function(){   
   $(this).toggleClass("classToKeep")
});