Categories
coding

a question for you javascript/html5 guys/dolls

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”&gt;

<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”&gt;

<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>

By mikebwriter

Hi, I'm Mike. I specialise as a freelance game dev mentor, novelist, critic/essayist, video producer, digital product designer, cartoonist, comic writer, game writer, mecha designer and short fiction writer and am a self-taught art director/attraction designer. I am interested in both producing micro-budget video and digital products, sketching, fiction writing and writing songs. I have some videos with songs I've written on them - find via my website.

My sense of humour is absurdist, inwardly bleak, caustic and morose, self-referential, rebellious and defiant, even in some cases sadistic, but overall sincere and even in the tragedies, hopeful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s