I am working on an accordion menu and my problem is that I want the menu sub menu to stay open when one of the links in the sub menu is clicked. I have come up with a a javascript function to add the class that looks like this:
$(function(){
$('#collapseTwo' + location.pathname.split('/register_deal.aspx').slice(-1)).addClass('in');
});
The code above works and keeps the accordion open when the link is clicked. When I try to add another function for the next page it doesn't work. Example:
$(function(){
$('#collapseTwo' + location.pathname.split('/find_deals.aspx').slice(-1)).addClass('in');
});
I was thinking that I could just duplicate the function for each page since they are all using the same menu. I am not sure why it is not working. Any help on this would be great. Thank you!
Here is an example of the menu:
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="list-unstyled">
<!-- <li><a id="side_deal_reg" ClientIdMode="Static" runat="server">Deal Registration</a></li> -->
<li>Review Deals</li>
<li>Register a Deal</li>
</ul>
</div>
</div>
Related
I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.
My code is the following and works this way:
<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1"> <span class="step">1</span><span class="title">Datos Generales</span>
</li>
<li data-target="#step2"> <span class="step">2</span> <span class="title">Detalles Financieros</span>
</li>
<li data-target="#step3"> <span class="step">3</span> <span class="title">Archivos</span>
</li>
<li data-target="#step4"> <span class="step">4</span> <span class="title">Historial Transacciones</span>
</li>
<li data-target="#step5"> <span class="step">5</span> <span class="title">Resguardante</span>
</li>
<li data-target="#step6"> <span class="step">6</span> <span class="title">Etiqueta</span>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong></strong> Datos Generales</h3>
</div><!-- End tab1 -->
<div class="tab-pane" id="tab2">
<br>
<h3><strong></strong> Detalles Financieros</h3>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong></strong> Historial de Transacciones</h3>
</div>
<div class="tab-pane" id="tab5">
<br>
<h3><strong></strong> Resguardante</h3>
</div>
<div class="tab-pane" id="tab6">
<br>
<h3 ><strong></strong> Etiqueta del Bien</h3>
</div>
When I click a button, a small window (div) appears which has the
code written above.
Clicking on any of the li elements, brings out its respective div
Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)
As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.
When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).
My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.
Any tips would be appreciated.
You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.
Here is the code:
$(function(){
$('#modal-btn').click(function () {
$("#modalFormUlId a:eq(0)").click();
// or
//$('#modalFormUlId a:first').tab('show');
});
});
Here is working example http://jsfiddle.net/0mvt0qe5/3/
Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this.
Try doing this:
set the localStorage based on your active tab, you can give on onclick event of any tab
localStorage.setItem("activeTab", "Archivos");
Use localStorage.getItem("activeTab"), based on that add active class to the tab
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working
In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.
You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle
In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">
Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.
I have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. It works if I right-click and say open in new tab, but otherwise nothing happens. I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what.
Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs
Here is a simple version of my code:
<div class="tabbable features tabs-left row-fluid">
<ul class="nav nav-tabs span3 uppercase">
<li class="active">Overview</li>
<li>What you get</li>
<li>Our Process</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="l1">
<h3>Overview</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l2">
<h3>What You Get</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l3">
<h3>Our Process</h3>
<a href="/anotherpage">
</div>
</div>
</div>
</div>
Thank you in advance for any advice you have. I'm pretty new to Bootstrap, so I'm kinda at a loss.
In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:
$('.tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You should make it:
$('.tabbable .nav-tabs a').click( //etc..
This way no other a's are selected by jQuery..
Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.
I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open.
I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:
<div class="tab-pane active" id="institutional">
<div class="accordion" id="accordion2">
{foreach name=loop from=$institutional item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
{$film->title()|escape} -
{$film->title_suffix()|escape}
</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
<div class="accordion-inner">
http://jsfiddle.net/dylanglockler/7qy8g/1/
----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.
I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids.
My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:
<div class="accordion" id="accordion1">
{foreach name=loop from=$home item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
The problem seems to be having the accordion inside the tab content.
When it's removed from the tab-pane it works fine: http://jsfiddle.net/skelly/7qy8g/2/