0

I've successfully managed to add the class 'active' to the current page item using the for each in my template page.

What I want to do is with jQuery (or css3 if anyone has any ideas) get the ul of current li to display if either it is active or on clicking on another div.

Here is the output of my HTML

<div id="menu">
 <div class="trigger"> show or hide it </div>
   <ul class="things">
     <li> item 1 </li>
     <li class="active"> item 2 </li>
     <li> item 3 </li>
   </ul>

 <div class="trigger"> show or hide it </div>
   <ul class="things">
     <li> item 4 </li>
     <li> item 5 </li>
     <li> item 6 </li>
   </ul>
</div>

So what I would like is using jQuery to only show the ul if either the trigger is clicked or if it contains an active li and for both options to be available at the same time. So show it by default it has an active li but also let me hide it by clicking the trigger.

2
  • Can you please show your existing CODE in your question?
    – Fayaz
    Commented Feb 10, 2017 at 18:58
  • @Fayaz - apologies, updated to show my HTML output! Thanks Commented Feb 10, 2017 at 19:09

2 Answers 2

0

You can achieve this with a simple JQuery selector.

$($('.active').parent('ul').get(0)).css('display', 'none');

We are selecting the parent UL where we find the active class and hiding the element via css.

https://jsfiddle.net/0voxj6fp/

2
  • Thanks Bill - the issue I was facing was using the trigger aswell to toggle the ul. How would I set only the UL with an active li to show and then use its trigger after to hide and show it? Commented Feb 10, 2017 at 21:21
  • jsfiddle.net/2xw1gexf
    – Bill
    Commented Feb 10, 2017 at 22:45
0

see here some add i did in html

<title>fghgfhgfh</title>
<link href="css/ans.css" type="text/css" rel="stylesheet"/>


</head>
<body>
<div id="menu">
    <div class="trigger"><button> show or hide it </button></div>

  • item 1
  • item 2
  • item 3
  •     <div class="trigger"> <button> show or hide it</button> </div>
    

  • item 4
  • item 5
  • item 6
  • </body>
    

    here is the the jequrey src

    (document).ready(function(){ $("button").click(function(){ $("li").toggle();

    }); });

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.