I have an Isotope filter menu and I'm using hash history so the filters are still set if a user comes back to the page. Because we are using .slideDown to expand sub-menu items, the sub-menu items are hidden when you come back to the page even though some filters within them are selected.
I'm trying to use:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
However, since the class "selected" is being generated by the jQuery filter (Isotope), it's being ignored.
Fiddle: http://jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any</li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any</li>
<li>illuminated</li>
<li>non-illuminated</li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any</li>
<li>wall</li>
<li>ground</li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}
I guess you are missing a '.'
if ($('#option1').is('.selected')) {
$('.level-two').slideDown('fast');
}
Rather than copy the same process of each click with a repeated function you could always programatically trigger the clicks on the .selected anchors.
$('.option-combo a.selected').trigger('click');
A fiddle: http://jsfiddle.net/jgkwd/
Related
I have a side collapsible panel , on clicking the arrow icon the sub contents are hidden , and once hidden on clicking the arrow the sub contents are shown.
There is a jquery code for the slide down and slide up function , is there a way by default the sub contents are hidden and onclicking the arrow the sub content are shown or hidden accordingly?
The code is as
jQuery(function($) {
$('.active span.clickable').on("click", function(e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
You need to add css if you want sub-menu by default hidden. Please follow the below code, it will done your job::
HTML
<li class="active">
Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
CSS
.collapsein{
display: none;
}
JQUERY
jQuery(function ($) {
$('.active a.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
Working JSFiddle:: https://jsfiddle.net/80fpe9d9/
If you want your list to appear hidden by default it is only a simple adjustment. You would first set the css for it to display: none.
CSS
.collapsein {
display: none;
}
And also add the class panel-collapsed to your clickable span
HTML
Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
Working JSBin
Moved down arrow left for clarity.
Thanks for the answers!!!!
Had to add the css code for it to work properly
.collapsein{
display: none;
}
Use this Script code with Jquery
<script>
$(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
</script>
call the accordian id in html like below:
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Sub menu1 </li>
<li>Sub menu2 </li>
<li>Sub menu3 </li>
<li>Sub menu4 </li>
</ul>
</li>
</div>
Here is the Reference and Demo
I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?
First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.
$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.
I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.
Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO
It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.
Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it
I am trying to use bootstrap to create a dropdown toggle that allows the user to hide/unhide certain div sections. The code is seen below:
<div class="tabbable">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#">
Select an Area by:
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li>
<li><a data-toggle="tab" href="#Area">MLS Area</a></li>
<li><a data-toggle="tab" href="#City">City</a></li>
<li><a data-toggle="tab" href="#Zip">Zip</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /btn-toolbar -->
<div class="tab-content">
<div class="tab-pane active" id="Parish">
Parish
</div>
<div class="tab-pane" id="Area">
Area
</div>
<div class="tab-pane" id="City">
City
</div>
<div class="tab-pane" id="Zip">
Zip
</div>
</div>
It works (kind of), except for the fact that after selecting an option the first time, it never toggles off after selecting a new item. It also does not allow me to go back to an item that has already been selected. I have searched everywhere and used the web console in Firefox to debug, but do not see what the problem is. This happens in Chrome and IE too.
I have created a Bootstrap snippet that demonstrates the behavior here: http://bootply.com/102355
I would appreciate any help. Am I trying to do something with bootstrap that just can't be done yet?
I don't know if you've solved this, but here it is how I would do it using jQuery (I don't know bootstrap):
$('.dropdown-menu li a').click(function(){
DeselectCurrent();
});
var DeselectCurrent = function() {
jQuery('.dropdown-menu li').each(function(){
var attr = jQuery(this).attr('class');
if (typeof attr !== 'undefined' && attr !== false) {
jQuery(this).removeClass("active");
}
});
};
Here it's a working example: http://bootply.com/102465
By the way, in my example I named my function DeselectCurrent... It would make more sense if you named it DeselectPrevious.
Just a side note, I don't see in your markup an id with a value of myTab (like you are referencing it here $('#myTab a').click(function (e)) but I am assuming that's how you target your tabs in twitter-bootstrap...
Hope this helps.
I'm working on a drop-down menu, and would like to selectively change the href attribute for certain elements. The menu is made up of two classes, the menuitems and the submenu items. Every menuitem has a corresponding submenu, but some of the submenus contain empty lists. For the menuitems that have an empty submenu list, I want the href to be "#".
<div id="info" class="menuitem">Info<!--start menuitem-->
<div id="infosubmenu" class="submenu"><!--start submenu-->
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="business" class="menuitem">Business<!--start menuitem-->
<div id="businesssubmenu" class="submenu"><!--start submenu-->
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="jobs" class="menuitem">Jobs<!--start menuitem-->
<div id="jobssubmenu" class="submenu">
<ul>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
I've tried different variations of this code with $.each loops and regular javascript, but everything I've done either changes all the menuitem hrefs to "#", or doesn't change any of them.
if (!$('.menuitem').children('.submenu').children('ul').children('li').length > 0) {
$('.menuitem').children('a').attr('href', '#'); }
If anyone can show me what I'm doing wrong I'd really appreciate it! My test page can be found here.
$(".menuitem > a").each(function () {
if ($(this).next('.submenu').find('li').length > 0)
$(this).attr("href","#");
});
DEMO
I think this is what you're looking for:
$('.menuitem')
.children('.submenu')
.each(function(index) {
if($(this).children('ul').children('li').length === 0) {
$(this).closest('.menuitem').children('a').attr('href', '#');
}
});
For every submenu it checks the length of the ul > li array, and if it is 0 i changes the href of the link in the closest parent menuitem.