to block display: none; from a div after i press a div button-CodePudding

my english is not so good but i try my best to explain my problem and i try like 10 topics to find a solution but im cant figure..

i want after i press this div

 <div id="test" class="br3 mb3 ph3 pv2 ba b--black-10 flex justify-between items-center pointer hover-b--primary5">
 <div class="f5 flex items-center">Test1</div>

to block the display to show the content of this div

 <div id="modal" style="display: none; width: 370px; position: fixed; right: 2px; top: 0; z-index: 99; background-color: white; border-radius: 0px 0px 10px 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);">

Thanks and have a great day :)

CodePudding user response：

You can add an event listener to when the div is pressed or say onclick="changeDisplay()" and add that code to the div you want clicked.

Then add this code to style the div after the function has been issued:

  <script>
function changeDisplay() {
    document.getElementById("modal").style.display = "block";
    }
</script>