stackoom
  简体   繁体   中英

how to hide child element of parent div

 原文  2019-12-30 09:19:00  1   4    javascript/ jquery

Question

Hello I am trying to remove "Hello this is short description 1 " (plz see code) line dynamically , on accordian button ("section-1", "section-2", "section-3") click. right now it's being remove but the only problem is that it's removing all other button text, I want it should be remove only from that buttton where I have clicked. this is my code. 

 var acc = document.getElementsByClassName("accordion"); var i; var short = document.getElementsByClassName('short-desc') for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; $(".short").closest('small').hide(); } }); }
 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button> <div class="panel"> <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

4 answers

solution1
 1  2019-12-30 09:27:56

You can change from

$(".short").closest('small').hide();

to

this.querySelector('small').style.display = 'none';


 var acc = document.getElementsByClassName("accordion"); var i; var short = document.getElementsByClassName('short-desc') for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; //console.log(this.querySelector('small')) this.querySelector('small').style.display = 'none'; } }); }
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button> <div class="panel"> <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

solution2
 0  2019-12-30 09:26:05

Just small issue in your code. change your line to $(this).find('small').hide(); 

 var acc = document.getElementsByClassName("accordion"); var i; var short = document.getElementsByClassName('short-desc') for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; $(this).find('small').hide(); } }); }
 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Accordion</h2> <button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button> <div class="panel"> <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

solution3
 0  2019-12-30 09:26:16

You can use $(this) 

 var acc = document.getElementsByClassName("accordion"); var i; var short = document.getElementsByClassName('short-desc') for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { var _t = $(this); this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; _t.find(".short").closest('small').hide(); } }); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button> <div class="panel"> <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

solution4
 0 ACCPTED  2019-12-30 09:30:10

 var acc = document.getElementsByClassName("accordion"); var short = document.getElementsByClassName('short-desc') for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function () { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; $(this).children("small.short").show(); } else { panel.style.display = "block"; $(this).children("small.short").hide(); } }); }
 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Accordion</h2> <button class="accordion">Section 1 <small class="short" style="color:red; display:block">Hello this is short description 1 </small> </button> <div class="panel"> <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2 <small class="short" style="color:red; display:block">Hello this is short description 2 </small> <p id="short-desc2" style="display:none;">Hello this is short description </p> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3 <small class="short" style="color:red; display:block">Hello this is short description 3</small> </button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </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 How to hide parent div based on child name? how to hide parent div from 2 child divs? How to get the child of a parent div element How to Hide parent DIV if all child Div are hidden (display:none) How to hide the first child element of grand parent of the clicked element? hide parent div if child div is empty of html Hide parent div if child div is missing Hide child <div>s as parent div shrinks? hide parent div if child div is empty How to trigger onclick event only in the child div element but not in the parent div?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM