What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Hiding dropdown text on mobile etc


New member
I have an essay where I want to add extra dropdown text to main paragraphs. I want to be able to click on a down arrow and have extra text float over the top of the main text.
I prefer a clickable button rather than a hover, because on the mobile, I want to be able to click the same arrow and minimise the text again.
Its a simple thing, but this is the first time I have had to ask for help. This is the closest I have managed, which isn't close at all;

.dropdown {
position: relative;
display: inline-block;

.dropbtn {
background-color: white;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;

.dropdown-content {
display: none;
position: absolute;
background-color: white;
font-size: 80%;

<div class="dropdown" style="float:left;">
<button class="btn dropdown-toggle" id="dlDropDown" data-toggle="dropdown" data-bind="enable: !noResults()">
<img src="1024px-Vector_down_arrow_link.svg.png" width="26px"></button>

<div class="dropdown-content" style="left:0;">
min-width: 310px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;

.dropdown-content a:hover {background-color: white}
.dropdown:hover .dropdown-content {
display: block;

.dropdown:hover .dropbtn {
background-color: white;