Hide and Show content function javascript
Question
I'm very new to javascript, i was trying to make a function that hide and show content on my Q&A when i click on the img button, but i only managed to do it by making the same function 3 times on each button. Is there a way to make it in a single function ? When i tried to do it by one function, but whathever button i'm clicking on, the function only works for the first QA element on top.
function hideShowA() { var x = document.getElementById("hBlock1") var a = document.getElementById("QA1") if (x.style.display === "none") { x.style.display = "block"; a.style.height = "100%"; } else { x.style.display = "none"; a.style.height = "75px"; } } function hideShowB() { var y = document.getElementById("hBlock2") var b = document.getElementById("QA2") if (y.style.display === "none") { y.style.display = "block"; b.style.height = "100%"; } else { y.style.display = "none"; b.style.height = "75px"; } } function hideShowC() { var z = document.getElementById("hBlock3") var c = document.getElementById("QA3") if (z.style.display === "none") { z.style.display = "block"; c.style.height = "100%"; } else { z.style.display = "none"; c.style.height = "75px"; } }
div.QA { border: 1px solid black; box-shadow: 0 0 10px rgb(238, 191, 105); padding-left: 20px; padding-right: 10px; margin-bottom: 25px; border-radius: 8px; width: 550px; height: 75px; background-color: #021414; ; color: rgb(238, 191, 105); } div.QA#QA1 img { position: relative; left: 225px; } div.QA#QA2 img { position: relative; left: 280px; } div.QA#QA3 img { position: relative; left: 275px; } div.Qabloc { display: flex; flex-direction: column; align-content: center; margin-left: 300px; margin-right: 300px; margin-top: 80px; } div.blocTitle { position: relative; right: 32px; text-align: center; margin-bottom: 20px; font-family: 'Dancing Script', cursive; color: rgb(238, 191, 105); } div.hBlock { display: none; border-top: 0.1px solid white; padding-top: 10px; margin-right: 10px; color: white; } body {} html { overflow: hidden; } /* ALL ANIMATION */ /* img animation */ div.QA#QA1 img:hover { -webkit-animation: spin 3s; -moz-animation: spin 3s; animation: spin 3s; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } div.QA#QA2 img:hover { -webkit-animation: spin 3s; -moz-animation: spin 3s; animation: spin 3s; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } div.QA#QA3 img:hover { -webkit-animation: spin 3s; -moz-animation: spin 3s; animation: spin 3s; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* img animation */
<html lang="en" style="background-color:#021414;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/css.css" type="text/css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"> <title>Q&A</title> </head> <body> <div class="Qabloc"> <div class="blocTitle"> <h1>General Questions</h1> </div> <div class="QA" id="QA1"> <p> <h4> Do you accept All major Credits Cards ? <img onclick="hideShowA()" width="24px" height="24px" src="img/plus-sign.png"> </h4> <div class="hBlock" id="hBlock1">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> <div class="QA" id="QA2"> <p> <h4> Do you Support Local Farmers ?<img onclick="hideShowB()" src="img/plus-sign.png" width="24px" height="24px"> </h4> <div class="hBlock" id="hBlock2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> <div class="QA" id="QA3"> <p> <h4> Do You Use Organic Ingredients ? <img onclick="hideShowC()" src="img/plus-sign.png" width="24px" height="24px"> </h4> <div class="hBlock" id="hBlock3">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> </div> <script src="js.js"> </script> </body> </html>
[![
function hideShowA(){ var x = document.getElementById("hBlock1") var a = document.getElementById("QA1") if( x.style.display=== "none"){ x.style.display = "block"; a.style.height = "100%"; } else{ x.style.display = "none"; a.style.height = "75px"; } } function hideShowB(){ var y = document.getElementById("hBlock2") var b = document.getElementById("QA2") if( y.style.display=== "none"){ y.style.display = "block"; b.style.height = "100%"; } else{ y.style.display = "none"; b.style.height = "75px"; } } function hideShowC(){ var z = document.getElementById("hBlock3") var c = document.getElementById("QA3") if( z.style.display=== "none"){ z.style.display = "block"; c.style.height = "100%"; } else{ z.style.display = "none"; c.style.height = "75px"; } }
div.QA{ border: 1px solid black; box-shadow: 0 0 10px rgb(238, 191, 105); padding-left: 20px; padding-right: 10px; margin-bottom: 25px; border-radius: 8px; width: 550px ; height: 75px; background-color: #021414;; color:rgb(238, 191, 105); } div.QA#QA1 img{ position: relative; left: 225px; } div.QA#QA2 img{ position: relative; left: 280px; } div.QA#QA3 img{ position: relative; left: 275px; } div.Qabloc{ display: flex; flex-direction: column; align-content: center; margin-left: 300px; margin-right: 300px; margin-top: 80px; } div.blocTitle{ position: relative; right: 32px; text-align: center; margin-bottom: 20px; font-family: 'Dancing Script', cursive; color: rgb(238, 191, 105) ; } div.hBlock{ display: none; border-top: 0.1px solid white; padding-top: 10px; margin-right: 10px; color: white; } body{ } html{ overflow: hidden; } /* ALL ANIMATION */ /* img animation */ div.QA#QA1 img:hover{ -webkit-animation:spin 3s ; -moz-animation:spin 3s ; animation:spin 3s ; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } div.QA#QA2 img:hover{ -webkit-animation:spin 3s ; -moz-animation:spin 3s ; animation:spin 3s ; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } div.QA#QA3 img:hover{ -webkit-animation:spin 3s ; -moz-animation:spin 3s ; animation:spin 3s ; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* img animation */
<html lang="en" style="background-color:#021414;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/css.css" type="text/css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"> <title>Q&A</title> </head> <body> <div class="Qabloc"> <div class="blocTitle"> <h1>General Questions</h1> </div> <div class="QA" id="QA1"> <p> <h4> Do you accept All major Credits Cards ? <img onclick="hideShowA()" width="24px" height="24px" src="img/plus-sign.png"> </h4> <div class="hBlock" id="hBlock1">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> <div class="QA" id="QA2"> <p> <h4> Do you Support Local Farmers ?<img onclick="hideShowB()" src="img/plus-sign.png" width="24px" height="24px"> </h4> <div class="hBlock" id="hBlock2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> <div class="QA" id="QA3"> <p> <h4> Do You Use Organic Ingredients ? <img onclick="hideShowC()" src="img/plus-sign.png" width="24px" height="24px"> </h4> <div class="hBlock" id="hBlock3">ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</div> </p> </div> </div> <script src="js.js"> </script> </body> </html>
1 answers
solution1
0 2020-09-18 14:48:52
First don't use img inside h1-h5 tags if you want add image, you can create div wrapper like :
<div>
<h2>title</h2>
<img.../>
</div>
In js you can create one task with few variants, one of them is on click add class and function show/hide implement with css display: none / display: block;
let qa = document.querySelectorAll('.qa') qa.forEach((e,i)=>{ e.querySelector('.button').addEventListener('click', _=>e.classList.toggle('show')) })
*{ padding: 0; margin: 0; } .button{ display: inline-block; display: flex; align-items: center; justify-content: center; padding: 10px; cursor: pointer; } .qa{ display: flex; flex-direction: column; } .answer{ display: none; } .qa.show .answer{ display: block; }
<div class="qa"> <div class="button">show answer</div> <div class="question">FAQ 1</div> <div class="answer"><p>Lorem ipsum</p></div> </div> <div class="qa"> <div class="button">show answer</div> <div class="question">FAQ 1</div> <div class="answer"><p>Lorem ipsum</p></div> </div> <div class="qa"> <div class="button">show answer</div> <div class="question">FAQ 1</div> <div class="answer"><p>Lorem ipsum</p></div> </div> <div class="qa"> <div class="button">show answer</div> <div class="question">FAQ 1</div> <div class="answer"><p>Lorem ipsum</p></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JavaScript hide and show content
Hide & show content with javaScript
Javascript show and hide function
Javascript hide/show function
JavaScript - show/ hide function
Show Hide function in JavaScript
Hide/show html content with javascript
Javascript with session to show or hide content
show/hide html content in javascript
javascript show/hide table of content
Related Tags