Toggling displaying children using jquery - javascript

When the "Album 1" link is clicked I want to toggle between hiding and showing the photos. However, right now it's not doing anything at all. I tried to debug it in console, but it's not outputting anything useful.
script.js
$(document).ready(function() {
// album click toggle
$('.album a').click(function() {
console.log($(this).parent().find(".photos"));
$(this).parent().find(".photo").hide();
});
});
index.html
<div class="album">
<h2>Album 1</h2>
<ul class="photos">
<li>
<img src="img/img1.jpg">
<span class="info"><span>Image 1</span></span>
</li>
<li>
<img src="img/img2.jpg">
<span class="info"><span>Image 2</span></span>
</li>
<li>
<img src="img/img3.jpg">
<span class="info"><span>Image 3</span></span>
</li>
</ul>
</div>

You're targeting .photo instead of .photos.
Beside that you could actually Toggle like:
jQuery(function($) {
// album click toggle
$('.album a').click(function(e) {
e.preventDefault(); // Prevent browser scroll to top
$(this).closest(".album").find(".photos").stop().slideToggle();
});
});
*{margin:0; box-sizing:border-box;}
.album ul {display:none; list-style:none; padding:0; margin:0; overflow:auto;}
.album li {display:inline-block; vertical-align:top;}
.album li>*{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="album">
<h2>Album 1</h2>
<ul class="photos">
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 1</span></span>
</li>
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 2</span></span>
</li>
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 3</span></span>
</li>
</ul>
</div>
<div class="album">
<h2>Album 2</h2>
<ul class="photos">
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 1</span></span>
</li>
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 2</span></span>
</li>
<li>
<img src="//placehold.it/64x50">
<span class="info"><span>Image 3</span></span>
</li>
</ul>
</div>

your $(this).parent() refer to h2
and is '.photos' not '.photo'
$(document).ready(function() {
// album click toggle
$('.album a').click(function() {
console.log($(this).parent().parent().find(".photos"));
$(this).parent().parent().find(".photos").hide();
});
});
or
$(document).ready(function() {
// album click toggle
$('.album a').click(function() {
console.log($(this).parents().find(".photos"));
$(this).parents().find(".photos").hide();
});
});

Related

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');
}
});

jQuery: Only affect elements with a certain class that are children of another element

I have a jQuery function that toggles a drop-down navigation menu by changing its class on click:
$(function () {
$('.nav-titles').on('click', function() {
$('.nav-dropdown').toggleClass('nav-dropped-down');
});
});
<nav>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
</nav>
The problem is that it changes the class of all drop-down menus instead of just the one whose button was clicked. Can I do anything so it only changes the .nav-dropdown that is directly under its .nav-titles button?
Added the HTML structure as requested.
You need to find parent li element, and look for the dropdown class on it:
$('.nav-titles').on('click', function() {
$(this).closest('li').find('.nav-dropdown').toggleClass('nav-dropped-down');
});
The thing is that you can't click on the nav-titles class because it wrapped by its li parent, so you must select the li tag for the click & not the nav-titles class, then search for the nav-dropdown class inside of it.
$(function () {
$('.nav-titles').on('click', function() {
$(this).closest('.nav-dropdown').toggleClass('nav-dropped-down');
});
});
$('li').on('click', function() {
$(this).find('.nav-dropdown').toggleClass('nav-dropped-down');
});
.nav-dropped-down
{
height:20px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
</nav>

Hover delay for parent of Dropdown jQuery

I am trying to create a dropdown menu. This code for it is:
<script type="text/javascript">
$(document).ready(function(e) {
$('.has-sub').hover(function() {
$(this).toggleClass("tap", 350, "easeOutSine");
});
});
</script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.
I have tried some other solutions that were provided with different questions, but they did not work.
Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.
$(document).ready(function(){
$('.has-sub').hover(
function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
function(){$(this).removeClass("tap"); clearTimeout()}
);
});
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
Here you go. If you need anything else, let me know.
$('.link').mouseenter(function(){
int = setTimeout(() => {
$('.dropdown').fadeIn();
}, 2000);
}).mouseleave(function(){
clearTimeout(int);
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html" class='link'>
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul class='dropdown'>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>

Detect li hover and slide down child ul

I have this HTML, where .subul is hidden with display: none:
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">9</span></span>
</a>
<ul class="subul">
<li class="cat-item cat-item-40">
<a href="category/environment/test">
<span class="category-text">test</span>
<span class="count">
<span class="count-hidden">1</span>
</span>
</a>
</li>
</ul>
</li>
I want when li.par is hovered to slide down its child ul (if it has it), however I can't even seem to get it to just trigger on hover. Here's what I tried:
$('body').on('mouseenter', 'li.par', function() {
if ($(this).children("ul").length) {
alert('code');
}
$(this).children("ul").slideDown();
alert('code');
});
EDIT css
ul.subul {
display: none;
}
Try this:
$('li.par').hover(function(){
$(this).children('ul.subul').slideDown();
},function(){
$(this).children('ul.subul').slideUp();
});
Please Use This :
$('body').on('mouseenter', 'li.par', function() {
$(this).find("ul").slideDown();
});
$('body').on('mouseleave', 'li.par', function() {
$(this).find("ul").slideUp();
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<ul>
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">9</span></span>
</a>
<ul class="subul" style="display:none">
<li class="cat-item cat-item-40">
<a href="category/environment/test">
<span class="category-text">test</span>
<span class="count"><span class="count-hidden">1</span></span>
</a>
</li>
</ul>
</li>
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">10</span></span>
</a>
</li>
</ul>

JavaScript/Jquery - hide displayed div, show another, and repeat

I would like to show a div with id "houseImages" on page load while hiding divs "landImages", "renovationImages", "UpcomingImages", and "voteForNext". Upon clicking "Landscaping", I would like to display the div "landImages" and hide div "houseImages". Obviously, I would like this functionality to continue through the list and when I click "Painting" that div would reappear. How would I do this using JavaScript?
Here is what I have so far:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
Painting
</li>
<li id="leftColumnLandscaping">
Landscaping
</li>
<li id="leftColumnRenovations">
Renovations
</li>
<li id="leftColumnUpcoming">
Upcoming
</li>
<li id="leftColumnNext">
Vote for <br>Next!</br>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<img src="./img/house1.jpg" />
</li>
<li>
<img src="./img/house2.jpg" />
</li>
<li>
<img src="./img/house3.jpg" />
</li>
<li>
<img src="./img/house4.jpg" />
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<img src="./img/land1.jpg" />
</li>
<li>
<img src="./img/land2.jpg" />
</li>
<li>
<img src="./img/land3.jpg" />
</li>
<li>
<img src="./img/land4.jpg" />
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<img src="./img/renovation1.jpg" />
</li>
<li>
<img src="./img/renovation2.jpg" />
</li>
<li>
<img src="./img/renovation3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<img src="./img/upcoming1.jpg" />
</li>
<li>
<img src="./img/upcoming2.jpg" />
</li>
<li>
<img src="./img/upcoming3.jpg" />
</li>
<li>
<img src="./img/renovation4.jpg" />
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>
I'd suggest changing your <a href=""> to the ID of the div you would like to show. Then you can do something like:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
I personally like the Hide -> fadeIn effect combination. If you have a 2 buttons a 2 divs, you can toggle which one is show like this:
HTML:
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>​
CSS:
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}​
JS:
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});​
See the JSfiddle: http://jsfiddle.net/HSNLN/
You attach this method to any event you can catch with jQuery, and show/hide and divs.

Categories