How to hide Show section with menu click? - javascript

I create a menu :
<ul class="navigation-bar navigation-bar-left">
<li class="active">About</li>
<li>schedule</li>
<li>speakers</li>
<li>Map</li>
<li class="featured"><i class="fa fa-play-circle fa-1x"></i>Register</li>
</ul>
And I want to show/hide the corresponding sections :
<section id="about" class="section dark">
Thanks !

Use jquery toggle() method to do this in simple way.
Refer http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

If you have a structure like
<ul class="navigation-bar navigation-bar-left">
<li class="active">About</li>
<li>schedule</li>
<li>speakers</li>
<li>Map</li>
<li class="featured"><i class="fa fa-play-circle fa-1x"></i>Register</li>
</ul>
<section id="sec-about" class="section dark"><h2>About</h2></section>
you could toggle the section like
document.getElementById('nav_about').addEventListener('click', function(){
var secAbout = document.getElementById('sec-about');
if( getComputedStyle(secAbout,null).display=='none') secAbout.style.display='block';
else secAbout.style.display='none';
}, false);
Compare jsfiddle

Related

Clicking on sub menu not opening the page it is hiding the sub menu in HTML

Hi i have created a dropdown sidebar menu but the problem when i click on main menu it is displaying the sub menu correctly but the problem is when i click on sub menu it is not opening the link it is getting hided.Here is the code for that.
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<h2>Materno Platform</h2>
</div>
<ul class="sidebar-nav">
<li>Dashboard</li>
<li>Customers</li>
<li>providers</li>
<li>User Management</li>
<li>Plans</li>
<li class="has-ul">Order Fullfillment<i class="fa fa-plus"></i>
<ul class="sub-ul">
<li>Plan Purchases</li>
<li>Med Orders</li>
<li>Lab Orders</li>
<li>predictive Analytics</li>
</ul>
</li>
<li class="has-ul">Master Data Management<i class="fa fa-plus"></i>
<ul class="sub-ul">
<li>Care Plans</li>
</ul>
</li>
<li>Transcriptions</li>
<li>Profile</li>
</ul>
</aside>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#sidebar-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$('li.has-ul').click(function() {
$(this).children('.sub-ul').slideToggle(500);
$(this).toggleClass('active');
event.preventDefault();
});
Fiddle Link: https://jsfiddle.net/3yfdcto0/1/
Change Jquery
$('li.has-ul a').click(function() {
$(this).parent().find('.sub-ul').slideToggle(500);
$(this).parent().toggleClass('active');
/*event.preventDefault();*/
});
https://jsfiddle.net/lalji1051/kp8x4e7w/4/
I hope this will help you.
$('li.has-ul a').click(function() {
$(this).siblings('.sub-ul').slideToggle(500);
$(this).parent().toggleClass('active');
event.preventDefault();
});

javascript horizontal menu click to open

Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle

JQuery hide/show not working as it should

I'm trying to make a drop down menu and have it open sub menus on click and close them on click, but I cannot even get it to hide my submenu to start off with on a click.
Here is my JQuery code:
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").hide();
});});
And this is my html code that I am trying to get to hide/show
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
Am I doing something wrong on the jquery end? Because from what I have looked on here this should be working, but it's not.
Using toggle() may be more effective:
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});
Example Fiddle
$(document).ready(function(){
$("#timeli").on('click', function()
{
$("#timeUlSub").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub is part of the #timeli li. Move it outside the li. In addition, jquery .slideToggle() is a better method than .hide().
Check if you have Jquery linked.
Try this out for conditional usage :
$(document).ready(function(){
$("#timeli").on('click', function(){
if($("#timeUlSub").is(':hidden')){
$("#timeUlSub").show();
} else {
$("#timeUlSub").hide();
}
});
});
<div class="timeline">
<ul>
<li id="timeli">1996
<ul id="timeUlSub">
<li>
<p class="timeline-date">1997</p>
<p class="timeline-description">This is in the submenu</p>
</li>
</ul>
</li>
<li>1999</li>
<li>2000</li>
<li>2004</li>
<li>2006</li>
<li>2007</li>
</ul>
</div>
#timeUlSub{
display:none;
}
$(document).ready(function(){
$("#timeli").click(function(){
$("#timeUlSub").toggle();
});});
jsfiddle: http://jsfiddle.net/shellyjindal/rxb56emp/

how to add javascript function to a class of active?

how to add javascript function to a class of active ??
I do not understand completely about javascript.
if i click menu its like remove and add new class nav active.
<div id="sidebar">
<ul id="mainNav">
<li id="navDashboard" class="nav active">
<span class="icon-home"></span>
Beranda
</li>
<li id="navPages" class="nav">
<span class="icon-document-alt-stroke"></span>
Data Profil
<ul class="subNav">
<li>Peta Lokasi</li>
<li>Site Plan</li>
</ul>
</li>
You can use something like this:
$(selector).click(function(){
$(this).removeClass(your class)
.addClass('active');
});
You have to define the selector you want to do something.

.click() functionality when clicking elements

Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});

Categories