I would like to have the possibility to show/hide an ul by clicking on p. My HTML looks like this:-
<li class="type_unknown depth_2">
<p class="tree_item branch">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123">
<span class="glyphicon glyphicon-spacer"></span> Daoust University Refreshs
</a>
</p>
<ul id="yui_3_15_0_4_1495615549528_188">
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH DIVERSITEIT</a>
</p>
</li>
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH DOELGROEPENVERMINDERINGEN</a>
</p>
</li>
<li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187">
<p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH FEESTDAGEN</a>
</p>
</li>
<li class="type_unknown depth_3">
<p class="tree_item leaf">
<a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH VREEMDELINGEN</a>
</p>
</li>
</ul>
</li>
You can see I have a p tag in my li and also an ul tag . The layout looks like this:
But I would like to have the possibility to have it open or closed.
Open :
So when you click on it, the content opens or closes. How can I do this?
You can do it like below :-
$('.tree_item').click(function(e){
e.stopPropagation();
$(this).next('ul').toggle();
});
example:-
$('.tree_item').click(function(e){ e.stopPropagation(); $(this).next('ul').toggle(); });
ul,li{ list-style:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="type_unknown depth_2"> <p class="tree_item branch"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123"> <span class="glyphicon glyphicon-spacer"></span> Daoust University Refreshs </a> </p> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH DIVERSITEIT</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH DOELGROEPENVERMINDERINGEN</a> </p> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH FEESTDAGEN</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH VREEMDELINGEN</a> </p> </li> </ul> </li> <li class="type_unknown depth_2"> <p class="tree_item branch"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123"> <span class="glyphicon glyphicon-spacer"></span> Daoust </a> </p> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <p class="tree_item leaf wiki_newentry" id="yui_3_15_0_4_1495615549528_186"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> <li class="type_unknown depth_3"> <p class="tree_item leaf"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270"><span class="glyphicon glyphicon-spacer"></span> REFRESH</a> </p> </li> </ul> </li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.