如何使用 css 和 html 在单击垂直侧边栏菜单时显示子列表？

Question

I have a sidebar in which there are href's and on click of particular href, I want to show the list of data.

I have used css with html to get the desired results, but when i click on href, i want to append the buttons to that href only but it is appending the buttons to the bottom of side bar.

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<div class="sidenav">
<a href="#" onclick="javascript:myFunc()">col1</a>
<a href="#">col2</a>
<script> function myFunc() {

var $container = $("#container");
var $sidebar = $("#sidebar");
var button = $('<button />');
var item= 'abc';
button.text(item);
$sidebar.append(button);
var data='cde';
var button = $('<button />');
button.text(data);
$sidebar.append(button);
}</script>

</div>
<div id="container">
    <div id="sidebar">
    </div>
</div>

here is the link to what i have tried- https://jsfiddle.net/gaurav10022/exrLaz14/1/ I want that buttons gets appended after col1 not col2 and also when i click on col1 again it toggles.

Answer 1

I am not sure you are looking exactly what, however, You can try with below approach. just hide the div during page load and show and hide based on click event.

 function myFunc() { var $container = $("#container"); var $sidebar = $("#sidebar"); if($sidebar.children().length <= 0) { var button = $('<button />'); var item= 'abc'; button.text(item); $sidebar.append(button); var data='cde'; var button = $('<button />'); button.text(data); $sidebar.append(button); $('#col1').append($container); } else { $sidebar.html(''); } }

 .sidenav { width: 100px; position: relative; z-index: 1; top: 101; left: 201; background: #FFF; overflow-x: hidden; padding: 8px 0; }.sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; }.sidenav a:hover { color: #064579; } button { display: block; cursor: pointer; background-color: #FFF; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="sidenav"> <a href="#" onclick="myFunc()" id= "col1">col1</a> <a href="#">col2</a> </div> <div id="container" style="dsiplay: none"> <div id="sidebar"> </div> </div>

Please don't hesitate to let me know if you have any further query.