How can I add to the .parent-pages
if it has no children ( .child
). For example, if you click on Fabrication & Panels, the children should show up because it has them. But if you click on Underlayment, for example, it should take you immediately to that page.
Here's the Codepen: https://codepen.io/elemusma/pen/gOpVvqz
And here a page example: https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/
HTML
<div class="col-md-3 sidebar pt-5 pb-5">
<div class="col-sm-12 col-12 p-0 parent-pages activate">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/" class="parent">Flat Stock & Coil</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/copper/" class="child">Copper</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/painted-steel/" class="child">Painted Steel</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/flat-stock-coil/other/" class="child">Other</a>
</div>
</div>
<!-- end of new query for child pages -->
</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/" class="parent">Fabrication & Panels</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/corrugated-panels/" class="child">Corrugated Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/standing-seam-panels/" class="child">Standing Seam Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/exposed-fastener-panels/" class="child">Exposed Fastener panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/wall-and-soffit-panels/" class="child">Wall and Soffit Panels</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/custom-trim-packages/" class="child">Custom Trim Packages</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/roofing-and-architectural-details/" class="child">Roofing and Architectural Details</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/fabrication-panels/gutter-downspout-and-rainware-accessories/" class="child">Gutter, Downspout, and Rainware Accessories</a>
</div>
</div>
<!-- end of new query for child pages -->
</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/" class="parent">Rain Goods</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/subcategory-1/" class="child">Subcategory 1</a>
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/rain-goods/subcategory-2/" class="child">Subcategory 2</a>
</div>
</div>
<!-- end of new query for child pages -->
</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/metal-roofing-accessories/" class="parent">Metal Roofing Accessories</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
</div>
</div>
<!-- end of new query for child pages -->
</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/heat-cable-ice-melt/" class="parent">Heat Cable/Ice Melt</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
</div>
</div>
<!-- end of new query for child pages -->
</div>
<div class="col-sm-12 col-12 p-0 parent-pages">
<a href="https://wordpress-324331-1213892.cloudwaysapps.com/underlayment/" class="parent">Underlayment</a>
<!-- new query for child pages -->
<div class="child-pages col-md-12 pl-lg-4">
<div class="child-links">
</div>
</div>
<!-- end of new query for child pages -->
</div>
</div>
CSS
.col-md-3.sidebar {
background: #f7f7f7;
border-radius: 4px;
}
.sidebar a.parent {
color: #94752c;
font-weight: 600;
}
.sidebar a.parent:before {
content: ">";
margin-right: 9px;
color: #b8ae97;
}
.parent-pages{
cursor: pointer;
}
.parent-pages a{
pointer-events: none;
}
.parent-pages.activate a{
pointer-events: all;
}
a.child {
display: block;
color: #b8ae97;
}
.child-links {
height: 0;
opacity: 0;
transition: .15s ease-out;
}
.parent-pages.activate .child-links {
height: 100%;
opacity: 1;
transition: 1s ease-in;
}
JavaScript
document.querySelector('.sidebar').addEventListener("click", function(event) {
let activeTab = event.target.classList.contains("activate");
document.querySelectorAll(".parent-pages").forEach(function(panel){
panel.classList.remove("activate");
// panel.previousElementSibling.classList.remove("active");
});
if(!activeTab){
// Then show the clicked panel which is accessible as event.target
event.target.classList.add("activate");
// var panel = event.target.nextElementSibling;
// panel.style.maxHeight = panel.scrollHeight + "px";
}
})
document.querySelector('.parent-pages:first-child').classList.add('activate');
How can I add to the
.parent-pages
if it has no children (.child
)
You can check this using querySelectorAll()
like:
if (!document.querySelector('.parent-pages').querySelectorAll('.child').length)
{
// Parent pages have no child element with class `.child`
document.querySelector('.parent-pages').classList.add('activate');
}
If I understood your question (which you formulated in a convoluted manner) is what you are looking for?
document.querySelectorAll('.elephant').forEach(el=> { if (.el.hasChildNodes()) { el.parentNode.classList.add('alone') } })
.parent-pages { min-height:1em; border: 5px solid grey; margin:1em; padding:.4em; }.alone { border-color: red; }
<div class="parent-pages"> <div class="elephant"> <div> bob </div> <div> paul </div> </div> </div> <div class="parent-pages"> <div class="elephant"></div> </div>
[update] You can also use element.closest()
document.querySelectorAll('.elephant').forEach(el=> { if (.el.hasChildNodes()) { el.closest('div.parent-pages').classList.add('alone') } })
.parent-pages { min-height:1em; border: 5px solid grey; margin:1em; padding:.4em; }.alone { border-color: red; }
<div class="parent-pages"> <a href="#" class="parent">a element</a> <div class="child-pages"> <div class="child-links"> <div class="elephant"> <div> bob </div> <div> paul </div> </div> </div> </div> </div> <div class="parent-pages"> <a href="#" class="parent">b element</a> <div class="child-pages"> <div class="child-links"> <div class="elephant"></div> </div> </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.