What I'm trying to achieve is to have the 2 titles ("Core Processes" and "LDO Collaborative") have a dropdown and have boxes/cards below each appear and disappear. Hence, web navigation is not that complicated and faster. But after doing some research most of the dropdowns I've found JS is needed. (The image shows how my page is at the moment but would like to hide those cards within each title)

CodePudding user response：

you can use focus but note that it only works with buttons and the element has to come after the button. you can select with adjacent sibling selector ( ) or general sibling selector (~)

p{
width:90vw;
height:80vh;
background-color:teal;
transition:height 0.25s ease-in-out;
}
button:focus   p{
height:0vh;
}

<button>Tag1</button>
<p></p>