I found this code for "raw html" in wordpress to create a drop-down card with image and text when you hover over the button.
Trying to figure out how to change this code so that the card drops down when you click the button instead of hover?
here's my suggested code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Card Dropdowns</h2>
<p>Move the mouse over "London" or "Tokyo":</p>
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="London" style="width:100%">
<div class="w3-container">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the UK.</p>
</div>
</div>
</div>
<div class="w3-dropdown-hover">Tokyo
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_tokyo.jpg" alt="Tokyo" style="width:100%">
<div class="w3-container">
<p>Tokyo is the capital city of Japan.</p>
<p>13 million inhabitants.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I tried the following code, but it's still requiring a hover:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Animated Dropdown</h2>
<p>Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content (w3-animate-zoom|opacity|top|bottom|left|right).</p>
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click me</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-card-4 w3-animate-zoom">
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content w3-card-4" style="width:250px">
<img src="img_london.jpg" alt="London" style="width:100%">
<div class="w3-container">
<p>London is the capital city of England.</p>
<p>It is the most populous city in the UK.</p>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
