How to close another element when another element is clicked - javascript

I'm trying to display a menu when I click a link and if another menu is open close it before displaying the other menu. In other words like an accordion menu, but I only need one menu open at a time. So far everything I tried does not work. I don't know Jquery to well but I will post my code that I have so far.
HTML
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="1">
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="2">
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="3">
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="4">
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="5">
<li><a title="" href="">5a</a></li>
</ol>
</nav>
JQuery
$('.sub').hide();
$('#cat > ol > li > a').click(function(){
var hrefSuffix = $('a').attr('href').split('#')[1];
$('.sub > ol').attr(hrefSuffix).slideDown('slow');
$('.sub').find('ol[id=' + hrefSuffix ']').slideUp('slow');
});

It is a classic accordion implementation, You can make some tweaks like below.
var $subs = $('.sub');
$('#cat > ol > li > a').click(function() {
var href = $(this).attr('href'),
$target = $(href);
$target.stop().slideToggle('slow');
$subs.not($target).stop().slideUp('slow');
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub" id="1">
<ol>
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub" id="2">
<ol>
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub" id="3">
<ol>
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub" id="4">
<ol>
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub" id="5">
<ol>
<li><a title="" href="">5a</a></li>
</ol>
</nav>

add class on opened menu item, then, when you open another item, find previous by added class, hide it and remove class.
$(.menu-item).on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $this = $(this);
if($this.hasClass('opened')){
return;
}
$('.opened').slideUp('slow').removeClass('opened');
$this.slideDown('slow').addClass('opened');
});

In your case the accordion needs to be like this
HTML:
<ul class="accordion">
<li>
First Item
<div class="panel">
<p>First Item content goes here</p>
</div>
</li>
<li>
Seccond Item
<div class="panel">
<p>Seccond Item content goes here</p>
</div>
</li>
<li>
Third Item
<div class="panel">
<p>Third Item content goes here</p>
</div>
</li>
</ul>
CSS:
.accordion{padding:0px;margin:0px;list-style:none;}
.accordion li{margin-bottom:5px;}
.accordion a{padding:10px;background:#eaeaea;display:block;}
.accordion .panel{display:none;}
JS:
$(document).ready(function(){
$(".accordion a").on('click', function(){
var $allPanel = $(".accordion .panel");
var $currentPanel = $(this).next('.panel');
if($currentPanel.is(":hidden")){
$(this).next('.panel').slideDown('fast');
}else{
$(this).next('.panel').slideUp('fast');
}
$allPanel.not($currentPanel).slideUp('fast');
});
});
Created a fiddle here, hope this is what you needed.

Related

Change font color on scroll for nav items

I want to change my nav elements from white to gray but I get the error
cannot set property 'color' of undefined.
I have some javascript that pushes the nav up so it's hidden on a down scroll, but I need the color of the elements to change from white to gray.
window.addEventListener("scroll",function() {
var el = $('#landingImage');
var heroBottom = el.position().top + el.outerHeight(true);
if(window.scrollY > heroBottom - 3) {
$('.item').style.color='white';
}
else {
$('.item').style.color='#7d7d7d';
}
},false);
This is HTML
<div id="landingImage">
<nav id="nav">
<ul class="menu">
<li class="logo"><img src="logo.png" height="100px"></li>
<li class="item">
Services <i class="arrow down"></i>
<ul>
<li>App Development</li>
<li>Web Design</li>
<li>UX Design</li>
</ul>
</li>
<li class="item">
Portfolio
</li>
<li class="item">
About
</li>
<li class="item button">
Contact
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
<div class="header">
<h1>We design</h1>
<p>You succeed. </p>
<button type="button">Get a quote</button>
</div>
</div>
You are currently changing the text color of the .item element, which does not affect the color of the a tag inside it. Instead, you should target specifically the a tag inside the .item:
window.addEventListener("scroll", function() {
var el = $('#landingImage');
var heroBottom = el.position().top + el.outerHeight(true);
if(window.scrollY > heroBottom - 3) {
$('.item a').css("color", "white")
}
else {
$('.item a').css("color", "#7d7d7d")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="landingImage">
<nav id="nav">
<ul class="menu">
<li class="logo"><img src="logo.png" height="100px"></li>
<li class="item">
Services <i class="arrow down"></i>
<ul>
<li>App Development</li>
<li>Web Design</li>
<li>UX Design</li>
</ul>
</li>
<li class="item">
Portfolio
</li>
<li class="item">
About
</li>
<li class="item button">
Contact
</li>
<li class="toggle"><span class="bars"></span></li>
</ul>
</nav>
<div class="header">
<h1>We design</h1>
<p>You succeed. </p>
<button type="button">Get a quote</button>
</div>
</div>
<div style="margin-top: 500px;"></div>

How to toggle clicked menu link and untoggle all of toggled links

My website came with this javascript for submenu toggle that work, however, when I click a new menu link the rest toggled links does not close so all them are left open.
How to toggle only clicked link and untoggle or remove all "open" links? If you have a new format of javascript that's fine too.
jQuery(function($) {
$('li.has-submenu span.icon-caret').click(function(e){
var $me = $(this);
if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
$me.siblings('.wsite-menu-wrap').toggleClass('open');
} else {
$me.siblings('.wsite-menu-wrap').addClass('open');
}
});
});
HTML:
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
Remove the open class from each element first : $('.open').removeClass('open');
First I would remove the display: none if you have no animations with jQuery on the menues. Further I don't know your CSS but you can try it like the following example
$(document).ready(function() {
$('#navMobile .wsite-menu-item').on('click', toggleMenuLink);
function toggleMenuLink(event) {
var target = $(event.target).parent();
event.preventDefault();
target.siblings().removeClass('open');
if (target.hasClass('has-submenu')) {
target.toggleClass('open');
}
}
});
#navMobile .has-submenu > .wsite-menu-wrap,
#navMobile .has-submenu > .wsite-menu {
display: none;
}
#navMobile .has-submenu.open > .wsite-menu-wrap,
#navMobile .has-submenu.open > .wsite-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 1</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 2</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
I was able to crack the code...
$('li.has-submenu span.icon-caret').on('click', function(e) {
event.preventDefault();
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.wsite-menu-wrap').addClass('open');
}
});

Clickable navigation with sub navigation?

I´ve got this navigation structure:
<nav class="navbar navbar-top mod_navigation " >
<div class="ws-navbar-collapse pull-left">
<ul class="nav navbar-nav">
<li class="submenu mega ncol-3 first nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Lösungen</span>
</a>
<div class="subnav-container">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Digitalisierung</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
And I would like the click effect from this page:
https://www.invisionapp.com/
I've tried it with this js script, but its not working:
$('ul li.nav-item').on('click', function() {
if(!$('.subnav-container').is(':visible')){
$(".subnav-container" ).slideDown();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
} else {
$(".subnav-container" ).slideUp();
var $this = $(this);
$this.toggleClass('is-active').children('ul').toggleClass('is-visible');
}
});
So if the main navigation point got the class "submenu", the sub navigation "subnav-container" should slide down on click.

anchor wrapped li for Slide-out menu in wordpress

i'm trying to do something like this: http://cssdeck.com/labs/3fo47n21 in wordpress, but i'm having trouble to get the navigation to wrap menu li with anchor tags like this:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>Accueil</li>
</a>
<a href="#" class="menu-link">
<li>Portfolio</li>
</a>
<a href="#" class="menu-link">
<li>Themes</li>
</a>
<a href="#" class="menu-link">
<li>Templates</li>
</a>
<a href="#" class="menu-link">
<li>Contact</li>
</a>
</ul>
</nav>
All i got is this in the header:
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav id="nav-main" class="menu clearfix" role="navigation">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'menu-inner', 'items_wrap' => '<ul id="%1$s" class="%2$s"><a class="menu-link">%3$s</a></ul>'));
endif;
?>
</nav>
You guys are my last resort, any advice?
Does this help?
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<li>Accueil</li>
<li>Portfolio</li>
<li>Themes</li>
<li>Templates</li>
<li>Contact</li>
</ul>
</nav>
If you are going to use <a> elements in a <ul> element, you need to wrap in in an <li> element. You should actually wrap anything in a <ul> element with an <li> element.

Load html page content(require jquery scripting support) into a div using ajax/jquery

I am a new user here, I want to inform you all that i had thoroughly searched regarding my problem but the solution i found doesn't work perfectly.
Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R A</title>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css"
/>
<script type="text/javascript" src="script/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="script/accord.js"></script>
<script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
directionNavHide: false,
pauseOnHover: true,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
<script type="text/javascript" src="script/loadcontent.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img class="headright" src="images/leaf-Rt.gif" width="48" height="50" alt="#">
<img class="headright" src="images/pine-cone-Rt.gif" width="58"
height="50" alt="#">
<img class="headleft" src="images/leaf-Lt.gif" width="48" height="50" alt="#">
<img class="headleft" src="images/pine-cone-Lt.gif" width="58" height="50" alt="#">
<h1><i>R F I</i></h1>
<h2><i>XYZ</i></h2>
</div>
<ul id="menu">
<li><a id="link1" href"#">Home</a></li>
<li>
Products
<ul>
<li>
Agarbatti
<ul>
<li><a href='#'>Raw</a></li>
<li><a href='#'>Scented</a></li>
<li><a href='#'>Flora</a></li>
</ul>
</li>
<li>
Dhoop
<ul>
<li><a href='#'>Soft / Wet</a></li>
<li><a href='#'>Sticks</a></li>
<li><a href='#'>Cone</a></li>
<li><a href='#'>Sambrani</a></li>
</ul>
</li>
<li>
<a href='#'>Loban</a>
<ul>
<li><a href='#'>Powder</a></li>
<li><a href='#'>Hard</a></li>
</ul>
</li>
<li><a href='#'>Candles</a>
<ul>
<li><a href='#'>Rose Candles</a></li>
<li><a href='#'>Decorative Candles</a></li>
<li><a href='#'>Royal Candles</a></li>
<li><a href='#'>Heart Candles</a></li>
<li><a href='#'>Orchid Candles</a></li>
<li><a href='#'>Floating Candles</a></li>
<li><a href='#'>Ball Candles</a></li>
<li><a href='#'>Christmas Candles</a></li>
<li><a href='#'>Pillar Candles</a></li>
<li><a href='#'>Gourmet Candles</a></li>
</ul>
</li>
<li ><a href='#'>Stands</a>
<ul>
<li><a href='#'>Agarbatti / Incense</a></li>
<li><a href='#'>Loban Stands</a></li>
<li><a href='#'>Dhoops Stands</a></li>
<li><a href='#'>Candle Stands</a></li>
</ul>
</li>
<li ><a href='#'>Puja Items</a>
<ul>
<li><a href='#'>Camphor</a></li>
<li><a href='#'>Cow's Ghee</a></li>
<li><a href='#'>Rumal/Chundari</a></li>
<li><a href='#'>Mukut</a></li>
<li><a href='#'>Mala</a></li>
<li><a href='#'>Hawan Samagri</a></li>
<li><a href='#'>Cotton</a></li>
<li><a href='#'>Janva</a></li>
<li><a href='#'>Gau Mutr</a></li>
</ul>
</li>
<li ><a href='#'>Mehndi</a></li>
<li ><a href='#'>Napthelene Balls</a></li>
<li ><a href='#'>Perfumes & Attars</a></li>
</ul>
</li>
<li>Testimonials</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Trade Enquiry
</li>
</ul>
<div id="outer">
<div class="inner">
<div id="main" align="center">
</div><!--end main-->
<div id="left">
<div id='cssmenu' style="top:2px">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Incense Sticks</span></a>
<ul>
<li><a href='#'><span>Raw</span></a></li>
<li><a href='#'><span>Scented</span></a></li>
<li class='last'><a href='#'><span>Flora</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Dhoop</span></a>
<ul>
<li><a href='#'><span>Soft / Wet</span></a></li>
<li><a href='#'><span>Sticks</span></a></li>
<li><a href='#'><span>Cone</span></a></li>
<li class='last'><a href='#'><span>Sambrani</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Loban</span></a>
<ul>
<li><a href='#'><span>Powder</span></a></li>
<li class='last'><a href='#'><span>Hard</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Candles</span></a>
<ul>
<li><a href='#'><span>Rose Candles</span></a></li>
<li><a href='#'><span>Decorative Candles</span></a></li>
<li><a href='#'><span>Royal Candles</span></a></li>
<li><a href='#'><span>Heart Candles</span></a></li>
<li><a href='#'><span>Orchid Candles</span></a></li>
<li><a href='#'><span>Floating Candles</span></a></li>
<li><a href='#'><span>Ball Candles</span></a></li>
<li><a href='#'><span>Christmas Candles</span></a></li>
<li><a href='#'><span>Pillar Candles</span></a></li>
<li class='last'><a href='#'><span>Gourmet Candles</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Stands</span></a>
<ul>
<li><a href='#'><span>Agarbatti / Incense</span></a></li>
<li><a href='#'><span>Loban Stands</span></a></li>
<li><a href='#'><span>Dhoops Stands</span></a></li>
<li class='last'><a href='#'><span>Candle Stands</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Puja Items</span></a>
<ul>
<li><a href='#'><span>Camphor</span></a></li>
<li><a href='#'><span>Cow's Ghee</span></a></li>
<li><a href='#'><span>Rumal/Chundari</span></a></li>
<li><a href='#'><span>Mukut</span></a></li>
<li><a href='#'><span>Mala</span></a></li>
<li><a href='#'><span>Hawan Samagri</span></a></li>
<li><a href='#'><span>Cotton</span></a></li>
<li><a href='#'><span>Janva</span></a></li>
<li class='last'><a href='#'><span>Gau Mutr</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Mehndi</span></a></li>
<li class='last'><a href='#'><span>Napthelene Balls</span></a></li>
<li class='last'><a href='#'><span>Air Freshner</span></a></li>
<li class='last'><a href='#'><span>Perfumes & Attars</span></a></li>
</ul>
</div>
</div><!--end left-->
<div class="clearer"></div>
</div><!--end inner-->
<div class="clearer"></div>
</div><!--end outer-->
<div id="footer" >
<!-- <div class="iconleft">
<a href="http://validator.w3.org/check?uri=referer"><img src="images/html-
blue.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</div>
<div class="iconright">
<a href="http://jigsaw.w3.org/css-validator/"><img src="images/css-blue.png"
alt="Valid CSS!" height="31" width="88"></a>
</div>-->
<p style="text-align:center;color:#FFF"> Copyright ©2013</p>
</div><!--end footer-->
</div><!--end wrapper-->
<div id="bodyfooter"></div>
</div>
</body>
</html>
Now what I want to do here is that when i click my menu for home with id "#link1" the div of my main page i.e "#main" should load with en external html file home.html
home.html
<br /><br />
<div class="slider-wrapper futurico-theme" >
<div id="slider" class="nivoSlider">
<img src="image/slideshow/cycleall.jpg" alt="">
<img src="image/slideshow/All-in-1.jpg" alt="">
<img src="image/slideshow/ECO.jpg" alt="">
<img src="image/slideshow/Fairy-Tale.jpg" alt="">
<img src="image/slideshow/Heritage.jpg" alt="" />
<img src="image/slideshow/honey.jpg" />
<img src="image/slideshow/incense.jpg" />
<img src="image/slideshow/Moods.jpg" />
<img src="image/slideshow/Morning.jpg" />
<img src="image/slideshow/Natya.jpg" />
<img src="image/slideshow/Prestige.jpg" />
<img src="image/slideshow/Sandalum.jpg" />
<img src="image/slideshow/Three.jpg" />
<img src="image/slideshow/wood.jpg" />
</div>
<div id="caption1" class="nivo-html-caption">
<strong>New Project</strong> <span></span> <em>Some description
here</em>.
</div>
<div id="caption3" class="nivo-html-caption">
<strong>Image 3</strong> <span></span> <em>Some description
here</em>.
</div>
</div>
<br /><br />
<script type="text/javascript" src="script/jquery.nivo.slider.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
directionNavHide: false,
pauseOnHover: true,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
I had used following code but it takes me to new page instead of loading the page in the "#main" div.
jQuery(document).ready(function(){
$('#link1').on('click', 'a', function(e){ //step 1
e.preventDefault(); //prevent default action, step2
var url = url("content/home.html"); //get the url, step 2
$.ajax({ //step 3
type: 'GET',
url: url,
//your other options
success: function(data){ //on success
$('#main').html(data); //update your div, step 4
}
});
});
});
Previously I had tried following code, which works but the Jquery script doesn't work with it
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
$('#main').load("content/home.html");
e.preventDefault();
});
});
Here is what I am getting
http://i40.tinypic.com/2nsncs4.jpg
Here is what I Want
http://i42.tinypic.com/tapoaa.jpg
Please help me out i am struck ed.
Thank you.
You don't need the whole $.ajax request stuff you can use straight the .load method from query
$( "#main" ).load( "our external url" );
jqyery documentation
However if you have a complete html page in your external url, the whole page will be loaded inside your #main element. This means duplicate html, body and etc. tags. I guess this is not the result you expect.
If you like to load only a particular part of the remote / external page, use a content selector inside the .load method
$( "#main" ).load( "ajax/test.html #container" );
So you will load only the content of the element with container id from the external page into your #main element.
Things where you are wrong:
The way you are Binding event on #link1, this should be $(container).on(event, target, function)
url should be string, I don't understand what is url("url.html")
Try this:
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
var url = "content/home.html";
e.preventDefault();
$.ajax({
type : 'GET',
url : url,
//your other options
success : function (data) {
$('#main').html(data);
}
});
});
});
Or instead on $.ajax(), you can simply do $.load() like:
$(document).ready(function () {
$(document).on('click', '#link1', function (e) {
$('#main').load("content/home.html");
e.preventDefault();
});
});

Categories