Bootstrap accordion target links stay active - javascript

So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.

Related

Bootstrap 3 - Don't want to double-click to close dropdown menu

I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
Click menu 1 > dropdown menu appears
Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
Click menu 1 > dropdown menu appears
Click menu 1 again to close it
Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown". That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>

Bootstrap - How to keep drop-down menu open when sub-menu is open

I am having difficulty trying to keep my drop-down menu open when i click on a sub menu. You would think that Bootstrap would do this right out the box. But i cant find any documentation on it.
here is what i found as a solution:
https://www.bootply.com/rgvY6oPO1J
In my HTML i have this:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Numbers
<ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
And here is whats in my JavaScript:
$("#btn-mynumbers").on("click", function (e) {
e.stopPropagation();
$("#mynumbers").slideToggle("fast");
});
for the most part it works. But I'm going to have a lot of menu items and i don't want to make a on click caller for every sub-menu i create.
So i tried putting
onclick="Toggle(this);"
in
id="btn-mynumbers"
and creating the function:
function Toggle(element) {
event.stopPropagation();
var parentid = element.id;
var childid = $(parentid).children("ul").attr("id");
$(childid).slideToggle("fast");
}
so i can give every sub-menu click the ability to stay open. but the event stopped ALL propagation, even the slideToggle. I don't know how to keep the drop down open when a sub-menu slides down.

It seems like there was an error with the function you made since event would probably be undefined. I changed it to something like below. But you can see it in action with the codepen link below.
$(".submenu").on("click", function (event) {
event.stopPropagation();
var target = event.currentTarget;
$(target).siblings('ul').slideToggle("fast");
});
The best approach if you don't want to put an id for every possible menu item that has a sub-menu, then work with classes. That way you don't need to recode.
I made you a codepen that shows how to use classes instead of ids as identifiers. I added a sample of another menu item with a sub-menu for you to play around with.
Hope that helps!

Bootstrap Navigation - Is there a way to have the parent clickable instead of just a toggle

I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks

Make the dropdown menu of bootstrap at top

I am using the dropdown menu component of twitter/bootstrap
And i have a timer countdown 10 minutes
I want to make dropdown menu show up (at top), and won't vanish even if user click the other place.
Only after user hovered that dropdown list, user can let it vanish by click other lace.
<li class="dropdown">
User Name
<ul class="dropdown-menu">
<li class="first" id = "mymenu">
setting
</li>
<li class="last">
sign_out
</li>
</ul>
</li>
How can i do that?
I had though about use event handler to prevent vanish even, but how can i do that?
Thanks for help!!

Poorly coded JQuery: naming dependancies

I have a few tabs on a page that have this markup
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
The hiding and showing of the content in these tabs are controlled by some JQuery code that begins thus
$(document).ready(function () {
// Hide all tabs apart from the overview
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
...
The problem is that if I add, remove or rename tabs (like I have just done), then I have to change all this code. What I would like is to add, rename or remove as many tabs as I like but to not have to modify this JQuery code.
I'm not really looking for someone to code a solution for me but rather wanted to start a discussion on tools, techniques etc that can be used to avoid this sort of naming dependency.
EDIT
I also have this bit of ugliness for when a tab is clicked.
$('#holiday-details-nav ul li a').click(function () {
// Remove active class from all links
$('#holiday-details-nav ul li').removeClass('active');
//Set clicked link class to active
$(this).parent().addClass('active');
// Set variable currentTab to value of href attribute of clicked link
var currentTab = $(this).attr('href');
// Hide all tabs
$('#holidaydetails-description-imagecontainer').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-overview').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rooms').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-rates').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-information').hide();
$('#holiday-details-tabs div:#tab-holidaydetails-reviews').hide();
$('#holiday-details-bottom').show();
$('#holiday-details-left-booknow').show();
// Show div with id equal to variable currentTab
$(currentTab).show();
$('#holidaydetails-description-imagecontainer').show();
return false;
});
Thanks,
Sachin

You could assign a common CSS class, say tab, to every li except overview, and then use a jQuery class selector to hide them all. For example:
<div id="holiday-details-nav">
<ul>
<li><a class="holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="tab holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="tab holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="tab holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="tab holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
And then, to hide every tab except overview:
$("holiday-details-nav .tab").hide();
Or the other way around, that is, add a specific class to overview, and hide every other tab:
<div id="holiday-details-nav">
<ul>
<li><a class="overview holidaydetails-description" title="Overview" href="#tab-holidaydetails-overview">Overview</a></li>
<li><a class="holidaydetails-included" title="Rooms" href="#tab-holidaydetails-rooms">Rooms</a></li>
<li><a class="holidaydetails-itinerary" title="Rates" href="#tab-holidaydetails-rates">Rates</a></li>
<li><a class="holidaydetails-accommodation" title="Information" href="#tab-holidaydetails-information">Information</a></li>
<li><a class="holidaydetails-reviews" title="Reviews" href="#tab-holidaydetails-reviews">Reviews</a></li>
</ul>
</div>
Then, to hide, select all tabs, and exclude overview using .not():
$("#holiday-details-nav a").not(".overview").hide();

When dealing with tabs, especially in the setup you have (where the href attribute has the id of the div related to it), you don't need to hardcode anything, use the title attribute, or use any extra classes. Look at this:
http://jsfiddle.net/FAM2s/2/
All it does it find all of the tabs' detail divs and hide them all, then only show the one related to what was just clicked.
As long as you set the correct href attributes for the links, and set the corresponding divs with those id's, it will work, no matter how many tabs you add/remove whenever you want.

Categories