How to reveal hidden div on click - javascript

I've got a hidden div that successfully slides out on click. However the content inside that div is dependent on which link is clicked and I'm trying to get it to show/hide depending on which link is clicked.
JS Fiddle Here.
All help is greatly appreciated
HTML
<div id="main-nav">
<ul class="list-unstyled">
<li class="sub director-sub">Directors</li>
<li>News</li>
<li class="sub contact-sub">Contact</li>
<li>
<ul class="list-inline social">
<li class="fb"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-envelope-o" aria-hidden="true"></i></li>
</ul><!-- /.list-inline social -->
</li>
<li class="sparks">
lorem ipsum
</li>
</ul><!-- /.list-unstyled -->
</div><!-- /#main-nav -->
<div id="sub-nav">
<div class="sub-content">
<!--begin directors-->
<div class="directors-subnav">
<h2 style="background:orange;">Directors Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
<!--begin Contact-->
<div class="contact-subnav">
<h2 style="background:green;">Contact Sub Nav</h2>
<ul class="list-unstyled">
<li>Lorem ipsum.</li>
<li>Atque, neque.</li>
<li>Omnis, inventore!</li>
<li>Fugit, atque.</li>
<li>Nisi, temporibus.</li>
</ul><!-- /.list-unstyled -->
</div><!-- /.directors-subnav -->
<!--end directors-->
</div><!-- /.sub-content -->
</div><!-- /#subnav -->
JS Here:
$(document).ready(function(){
//get nav container width
var boxWidth = $('#sub-nav').width();
// hide subnav
$('#sub-nav').width(0);
$('.directors-subnav, .contact-subnav').hide();
//set nav width to zero
$('#main-nav li.sub a').click(function(e){
// remove opened class from other links not clicked
$("#main-nav li.sub a").not(this).removeClass('opened');
e.preventDefault();
if($(this).hasClass('opened')){
// slide the box closed
$("#sub-nav").animate({
width: '0' + 'px'
});
} else {
$("#sub-nav").animate({
width: boxWidth + 'px'
});
}
// toggle class so we can animate box based on class
$(this).toggleClass('opened');
/****** show/hide of page specific content******/
if($(this).parent().hasClass('.director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
$console.log('directors clicked');
} else if($(this).parent().hasClass('.contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
$console.log('contact clicked');
}
/****** end show/hide of page specific content******/
})
})

You don't need dot in hasClass in lines 34 and 40. It's supposed to be hasClass('director-sub') not hasClass('.director-sub')

This is what you need.
couple of things needed changing.
In both the hasClass function arguments, the class name can not be preceded by a ".".
In the console.log statement, you cant have a $ preceding console.
There was an error in the html as well. in one location (line 14) you need to have target="blank" and not target="blank".
These changes makes the above piece of code work in the fiddle.
Thanks
Paras
/****** show/hide of page specific content******/
if($(this).parent().hasClass('director-sub')){
// show/hide directors subnav
$('.directors-subnav').toggle();
console.log('directors clicked');
} else if($(this).parent().hasClass('contact-sub')) {
// show/hide contaxct sub nav
$('.contact-subnav').toggle();
console.log('contact clicked');
}
/****** end show/hide of page specific content******/

just change it to hasClass('className') from hasClass('.className')

Related

Pin items from navigation to a separate sidebar (bookmarks)

I'm creating something many would call a bookmark bar, but within the website itself. Basically I have a regular Bootstrap navbar with few menu items that have a "thumb-tack" on them. By pressing the thumb-tack, user can pin that menu item for quick access to a sidebar I've created.
Now before this explanation goes way too messy, here is my current code, which is partially working, but on the other hand it is not.
JSFiddle
HTML
<nav id="oa-navbar" class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<i class="fa fa-area-chart" aria-hidden="true"></i> Dashboard
</li>
<li>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit content
</li>
<!-- PINNABLE MENU ITEM!! -->
<li class="pinnable">
<i class="fa fa-picture-o" aria-hidden="true"></i> Media
</li>
</ul>
</div>
</div>
</nav>
<!-- The "Quick-Access" navbar -->
<div id="oa-toolbar">
<div class="container-fluid">
<div id="oa-toolbarbtn" class="oa-btn btn btn-default">
<i class="fa fa-bars" aria-hidden="true"></i> Quick-Access
</div>
<div id="oa-toolbar-pinned">
</div>
</div>
</div>
JS
// Adding the "pinicon" to the pinnable link
$.each($("#oa-navbar li"), function () {
if ($(this).hasClass("pinnable")) {
var pinicon = '<a class="pin-it"><i class="fa fa-thumb-tack" aria-hidden="true"></i></a>';
$(this).find("a").append(pinicon);
}
});
// Pinning the link itself
$("#oa-navbar li .pin-it").click(function () {
var pinMenu = $("#oa-toolbar-pinned");
var nl_content = $(this).parent().html();
var nl = $("<li class='pinnedItem'>"+ nl_content +"</li>");
$(pinMenu).removeClass("active");
if (!$(this).parent().hasClass("pinned")){
$(nl).appendTo(pinMenu);
$(pinMenu).addClass("active");
}
$(this).parent().toggleClass("pinned");
});
The way it works now is that it does add the menu item to the quick-access menu, but it does not take the <a> tags, just what's inside of them.
The other issue is that when I press the thumb-tack on the navigation bar again, it does not remove the pinned item from the quick-access menu. There's got to be an easy way to do this, but I've taken the long road it seems.
Any advice will be more than welcome!
Try this example, actually you were close, I have just reversed your code
$("#oa-toolbar-pinned").on('click','.pinnedItem',function () {
var navBar = $("#oa-navbar ul li"); // find navbar
var content = $(this).find("a").html();
var appendCont = "<li class='pinnable'> <a class='pin-it' href='#'>" + content + "</a></li>"; // take content and surround with li
$(appendCont).appendTo(navBar.parent()); // append to navbar
$(this).remove(); // remove from pinned list
});
Edit 1:
Changed click event to delegate, because there was a problem that newly appended a tags don't fire click event, solved with this,
$(document).on('click', '#oa-navbar li .pin-it' ,function() {}
Hope helps,

Collapsible menu in jquery

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

how can I get the li classes inside the bootstrap dropdown menu using the classList.contains from javascript

This is what i'm trying to achive: when i open the dropdow menu a specific div (div id="spacer1") shoud be displayed and when i close the dropdown menu spacer1 should be hidden.
I've tryed this: when the drop down is open bootstrap adds a new class ("open") to the li tag; so used js(classList.contains) to check if the class"open is added to the li tag,
if (listArr[i].classList.contains('open'))
if so then it should make "spacer1"visible.
$("#spacer1").css("display", "block");
I've been searching for days but can't seem to get it to work. Really need some help.
Many thanks in advance....
This is the html
<section id="brouw-proces" class="bg-layou-2">
<div class="container-fluid">
<div class="brouwen">
<div class="container-fluid">
<!-- ================dropdown-menu============== -->
<div class="navbar brouwen-navbar navbar-inverse" role="navigation">
<div class ="container">
<div class="brouwen-nav">
<ul id="brouwen-Nav-List" class= "nav navbar-nav">
<li class="dropdown">
Mouten<b class = "caret"></b>
<ul>
<li>Zicht</li>
<li>Gehoor</li>
<li>Voelen</li>
<li>Proeven</li>
<li>Ruiken</li>
</ul>
</li>
<li class = "dropdown">
vergisten<b class = "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Instagram</li>
</ul>
</li>
<li class = "dropdown">
vergisten<b class = "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Instagram</li>
</ul>
</li>
<li class = "dropdown">
Lageren<b class = "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Instagram</li>
</ul>
</li>
<li class = "dropdown">
Dealcoholisatie<b class = "caret"></b>
<ul class = "dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Instagram</li>
</ul>
</li>
</ul><!-- /end of brouwen-Nav-List -->
</div><!--brouwen navigation menu -->
</div> <!-- /container -->
</div>
<!-- ==============dropdown-menu================ -->
</div>
</div><!-- /brouwen -->
<div id="spacer1"></div> <!-- the div that sopoused to hide and show
simultaniously with the dropdown menu -->
</div><!-- /container-fluid -->
js
<script>
$(document).ready(function(){
var brouwenNavList = document.getElementById('brouwen-Nav-List');
var listArr = brouwenNavList.getElementsByTagName('li');
for (var i=0; i<listArr.length; i++){
function doIt(){
if (listArr[i].classList.contains('open')){
$("#spacer1").css("display", "block");
} else{
$("#spacer1").css("display", "none");
}
}
}
});
div that should be displayed is set not to show by defauld by the css
#spacer1{
height: 300px;
width: auto;
background-color: transparent;
display: none;
}
One of the solutions could be listening to the custom events from the dropdown plugin : Bootstrap Dropdowns Event
And based on this, you can show/hide your spacer this way :
JSFiddle
$(document).ready(function(){
var spacer = $('#spacer1');
var navList = $('#brouwen-Nav-List');
navList.on('show.bs.dropdown',function(){
console.log('show');
spacer.show();
});
navList.on('hide.bs.dropdown',function(){
console.log('hide');
spacer.hide();
});
});
Let me know if it's the behavior you expected.
Thanks

How to close responsive menu, click outside of nav

Hello my problem is that i have a menu a responsive menu with bootstrap i want to close menu on responsive view on desktop its fine but on responsive view i want that when i click outside the nav menu on any area it should be close, my nav code is following
<!-- Navigation -->
<nav id="navigation-sticky" class="white-nav b-shadow">
<!-- Navigation Inner -->
<div class="nav-inner">
<div class="logo">
<!-- Navigation Logo Link -->
<a href="#home" class="scroll">
<!-- Your Logo -->
<img src="" class="site_logo" alt=""/><br>
</a>
</div>
<!-- Mobile Menu Button -->
<a class="mobile-nav-button colored"><i class="fa fa-bars"></i></a>
<!-- Navigation Menu -->
<div class="nav-menu clearfix ">
<ul class="nav uppercase oswald">
<li>home</li>
<li class="dropdown-toggle nav-toggle" ><span href="#about" class="scroll">About App<b data-toggle="dropdown"></b></span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>HOW DOES IT WORK?</li>
<li>Features</li>
<li>APP FLOW</li>
<li>F.A.Q</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>Service Types</li>
<li>Cities</li>
<li>Rates
</li>
<li>Download</li>
<li class="dropdown-toggle nav-toggle" ><span aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle scroll">Become a Driver</span>
<!-- DropDown Menu -->
<ul class="dropdown-menu uppercase gray-border clearfix">
<li>Signup</li>
<li>Flyer</li>
</ul>
<!-- End DropDown Menu -->
</li>
<li>login</li>
<li>contact</li>
</ul>
</div><!-- End Navigation Menu -->
</div><!-- End Navigation Inner -->
</nav><!-- End Navigation -->
i use this script to close menu it close menu but menu open by double click not on single click
$('html').click(function() {
$('#menu').hide();
});
I think this might work for you:
$(document).mouseup(function (e)
{
var container = $(".nav-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.css("display","none");
}
});
Updated: Try this
var container = $(".nav-inner div.nav-menu, .mobile-nav-button");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$(".nav-inner div.nav-menu").slideUp();
}
I think this is what you are looking for:
$('html').click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Try this:
$( "#menu" ).toggle( "slide" );

Prevent Sub-menu from collapsing after clicking on link (Bootstrap 3.1.1)

My bootstrap menu is as follows (this is the code snippet for one menu-item out of many):
<!-- Code for Navigable menu (mobile) -->
<nav class="navbar navbar-default" role="navigation">
<div class="container commonWidth">
<button type="button" style="width: 100%" class="navbar-toggle" data-toggle="collapse" data-target="#led-collapse">
LED & Lighting <b class="caret"></b>
</button>
<!-- Collect the nav links for toggling -->
<div class="collapse navbar-collapse hidden-sm" id="led-collapse">
<ul class="nav navbar-nav">
<li class="dropdown visible-xs">
LED Lights<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>LED Lamps & Tubes</li>
<li>Downlights, Spotlights & COB</li>
<li>LED Panels</li>
<li>LED Surface</li>
<li>Commercial & Industrial</li>
<li>LED GU10 Fittings</li>
<li>LED Strips</li>
</ul>
</li>
<li class="dropdown visible-xs">
Luminaires (Fittings)<b class="caret visible-xs"></b>
<ul class="dropdown-menu">
<li>Domestic Tube Fittings</li>
<li>Floodlights</li>
</ul>
</li>
</div> <!-- End LED Menu -->
</div> <!-- End commonWidth -->
</nav>
The issue is that immediately after clicking a 3rd level link (.dropdown-menu > li > a), entire 2nd level menu (li class="dropdown visible-xs") collapses. However, I want this to stay open after the 3rd level link is clicked.
Here is the fiddle: http://jsfiddle.net/dk49/ugzwmhm6/
Any Suggestions?
Thanks.
Once the economy link is clicked the click event is getting propagated to its parent, from there it goes to the next parent and so on . when it reaches the third parent, the third parent element is reacting to it by toggling the open class. So if you stop the propagation it will stay as it is.
Try the code below.
$('.dropdown-menu a').click(function(e){
e.stopPropagation();
})
This code will stop the propagation of the anchor tag to its parent
In case if you want to prevent the default click action use
$('.dropdown-menu a').click(function(e){
if($(this).attr('href') == "#" || $(this).attr('href') == "") // New code
e.preventDefault();
e.stopPropagation();
})
Update
I have updated the code to prevent scrolling if the URL is # or if there is no URL. this should serve the purpose

Categories

Resources