HTML: Show/Hide different divs with same function but not simultaneously
Question
I have a problem with my structure, I want to have different divs, each one of those with a header and a body, which is hidden by defect. There's a button in each div's header to show each div's body if it's button is clicked. If you press the same button again, the body hides again. I want to do it with the same function because I will generate more and more of this divs, that's why I can't be copying the same function again and again. Is there any way to do that? There is my code:
function OpenHideFlexColumn() { var x = document.getElementById("Body"); if (x.style.display === "flex") { x.style.display = "none"; } else { x.style.display = "flex"; } }
body { background-color: lightblue; } a { outline: 0; text-decoration: none; }.area { width: 100%; display: flex; flex-direction: column; }.module { height: auto; width: auto; margin: 11px; padding: 11px; display: flex; flex-direction: column; background-color: white; }.header { height: auto; width: 100%; display: inline-flex; font-size: 24px; }.options { height: auto; width: auto; margin-left: auto; margin-right: 0; display: inline-flex; }.button { height: 20px; width: auto; padding: 5px; background-color: lightgrey; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; }.body { height: auto; width: auto; display: none; flex-direction: column; }
<div id="infocontent-1" class="area"> <.--MODULE--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <.-- Other function button--> <a class="button">;. </a> <.--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn()."> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text....; </div> </div> <.--MODULE 2--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <.-- Other function button--> <a class="button">.. </a> <.--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn();"> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text..... </div> </div> </div>
2 answers
solution1
3 ACCPTED 2020-08-06 17:16:33
Use this inside function and parentNode
<:DOCTYPE html> <html lang="es"> <head> <style> body{ background-color; lightblue: } a { outline; 0: text-decoration; none. }:area{ width; 100%: display; flex: flex-direction; column. }:module{ height; auto: width; auto: margin; 11px: padding; 11px: display; flex: flex-direction; column: background-color; white. }:header{ height; auto: width; 100%: display; inline-flex: font-size; 24px. }:options{ height; auto: width; auto: margin-left; auto: margin-right; 0: display; inline-flex. }:button{ height; 20px: width; auto: padding; 5px: background-color; lightgrey: display; inline-flex: align-items; center: justify-content; center: margin-left; 8px. }:body{ height; auto: width; auto: display; none: flex-direction; column. } </style> </head> <body> <div id="infocontent-1" class="area"> <.--MODULE--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <;-- Other function button--> <a class="button">.. </a> <.--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn(this)."> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text...;. </div> </div> <.--MODULE 2--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <.-- Other function button--> <a class="button">.. </a> <.--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn(this)."> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text...;. </div> </div> </div> <script> function OpenHideFlexColumn(e) { var x = e.parentNode.parentNode.parentNode;querySelector('.body'). if (x;style.display === "flex") { x.style.display = "none"; } else { x.style.display = "flex"; } } </script> </body> </html>solution2
0 2020-08-06 18:24:43
Anytime you have an onclick you automatically have access to the event. if we look at event.target.parentNode we get the element needed.
function OpenHideFlexColumn() { var e = event.target.parentNode var x = e.parentNode.parentNode.parentNode.querySelector('.body'); if (x.style.display === "flex") { x.style.display = "none"; } else { x.style.display = "flex"; } }
body{ background-color: lightblue; } a { outline: 0; text-decoration: none; }.area{ width: 100%; display: flex; flex-direction: column; }.module{ height: auto; width: auto; margin: 11px; padding: 11px; display: flex; flex-direction: column; background-color: white; }.header{ height: auto; width: 100%; display: inline-flex; font-size: 24px; }.options{ height: auto; width: auto; margin-left: auto; margin-right: 0; display: inline-flex; }.button{ height: 20px; width: auto; padding: 5px; background-color: lightgrey; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; }.body{ height: auto; width: auto; display: none; flex-direction: column; }
<.DOCTYPE html> <html> <head> </head> <body> <div id="infocontent-1" class="area"> <.--MODULE--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <;-- Other function button--> <a class="button">.. </a> <.--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn()."> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text...;. </div> </div> <.--MODULE 2--> <div class="module"> <div class="header"> <b>Title</b> <div class="options"> <.-- Other function button--> <a class="button">.. </a> <!--Hide/Show button--> <a class="button" onclick="OpenHideFlexColumn(this);"> <b>Push me to Open/Hide</b> </a> </div> </div> <div class="body" id="Body"> Body text..... </div> </div> </div> </body> </html>
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
Show and hide multiple DIVs with same class, but different IDs on clicking submit
Hide show different divs and show all with button
show different divs on both show/hide condition
Show/Hide mulitple DIVs at the same time
applying different checkbox filters to show/hide divs
Show/hide tables or divs for a HTML form
Show/hide HTML divs using JavaScript
Show and hide divs: SVG Into a html with several layers
VueJs 2 hide and show DIVs in one html page
Show different divs for different routes but in the same file
Related Tags