For my product tour, I've structured a timeline with 4 main sections, each containing 4-5 subsections. Here's how it looks:
<ul class="slideshow-timeline">
<li class="active-target-main main-section"><a href="#target">Target</a>
<ul class="current-section target-sub">
<li><a href="#target-1">Donor Profiles</a></li>
<li><a href="#target-2">Segmentation</a></li>
<li><a href="#target-3">Custom Lists</a></li>
<li><a href="#target-4">RFM Analysis</a></li>
<li><a href="#target-5">Wealth Screening</a></li>
</ul>
</li>
<li class="main-section"><a href="#connect">Connect</a>
<ul class="current-section connect-sub">
<li><a href="#connect-1">Email Marketing</a></li>
<li><a href="#connect-2">Social Media</a></li>
<li><a href="#connect-3">Direct Mail</a></li>
<li><a href="#connect-4">Welcome Series</a></li>
</ul>
</li>
<li class="main-section"><a href="#convert">Convert</a>
<ul class="current-section convert-sub">
<li><a href="#convert-1">Donation Forms</a></li>
<li><a href="#convert-2">Automated Receipts</a></li>
<li><a href="#convert-3">Events</a></li>
<li><a href="#convert-4">Member Mgmt</a></li>
<li><a href="#convert-5">Moves Mgmt</a></li>
</ul>
</li>
<li class="main-section"><a href="#optimize">Optimize</a>
<ul class="current-section optimize-sub">
<li><a href="#optimize-1">Analytics</a></li>
<li><a href="#optimize-2">Campaigns/Funds/Appeals</a></li>
<li><a href="#optimize-3">A/B Testing</a></li>
<li><a href="#optimize-4">Task Management</a></li>
</ul>
</li>
</ul>
I'm interested in a JS solution to hide the connect-sub, convert-sub, and optimize-sub sections when the .active-tour div has a class of target-panel.
Although I tried using .css for this, I'm wondering if there's a more sophisticated approach?
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".connect-sub").css("display", "none");
$(".convert-sub").css("display", "none");
$(".optimize-sub").css("display", "none");
}
});
Since the timeline and slides are positioned as position:absolute and position:fixed, they don't flow with the page, making it challenging to target them with CSS alone.
In theory, the JS solution should work, but it's not hiding the 3 subsections for some reason, and no errors are appearing. You can view the working page here.
I'll keep exploring a solution, but any guidance you could offer would be greatly appreciated!
Updated to show all subnavs with javascript:
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".target-sub").css("display", "block");
}
});