I'm trying to make my div show up once the button is clicked. Here's the code

<div >
    <button >
        <i ></i>
    </button>
    <div id="menu-lists" >
        <div><a href=""><i ></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i ></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>

div.post-menu div.menu-lists {
    /* display: none; */
    position: absolute;
    width: 140px;
    right: 0;
    background-color: #ffffff7f;
    backdrop-filter: blur(8px);
    border-radius: 20px;
    margin: 10px 5px;
    z-index: 99;
    overflow: hidden;
    padding: 0 20px;
    height: 0;
}

.activePostMenu {
    padding: 20px;
    height: 124px;
}

$("button.button").click(function(){
    $(".menu-lists").toggleClass("activePostMenu");
});

I can see no errors in the web console so I can't really find the problem here. (The div is not outside the parent either since it's placed just fine before hiding it)

CodePudding user response：

You just need to update CSS. Follow the below code for the solution:

 $("button.button").click(function(){
    $(".menu-lists").toggleClass("activePostMenu");
});

div.post-menu div.menu-lists {
   display: none;
    position: absolute;
    width: 140px;
    right: 0;
    background-color: #ffffff7f;
    backdrop-filter: blur(8px);
    border-radius: 20px;
    margin: 10px 5px;
    z-index: 99;
    overflow: hidden;
    padding: 0 20px;
    height: 0;
}

div.post-menu div.menu-lists.activePostMenu {
    display: block;
    padding: 20px;
    height: 124px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <button >
        <i >[Button]</i>
    </button>
    <div id="menu-lists" >
        <div><a href=""><i ></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i ></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>

CodePudding user response：

Hello thank you for question Try below code, there are some better options in jQuery try out below code once

$("button.button").click(function(){
        $(".menu-lists").slideUp();
        $(this).next(".menu-lists").slideToggle();
    });

div.post-menu div.menu-lists {
       display: none; 
       position: absolute;
       width: 140px;
       right: 0;
       background-color: #ffffff7f;
       backdrop-filter: blur(8px);
       border-radius: 20px;
       margin: 10px 5px;
       z-index: 99;
       padding: 0 20px;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <button >
        <i >Button1</i> 
    </button>
    <div id="menu-lists" >
        <div><a href=""><i ></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i ></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>
<div >
    <button >
        <i >Button2</i>
    </button>
    <div id="menu-lists" >
        <div><a href=""><i ></i>&nbsp;&nbsp;Edit</a></div>
        <div><a href=""><i ></i>&nbsp;&nbsp;Delete</a></div>
    </div>
</div>