I am creating a dropdown menu for my website, and am using jQuery slideToggle. I have it working for each individual category on the navigation (When navparent is clicked, navhild toggles), however when clicking other parents, the previous child div remains open. I would like to close other divs when the parent is clicked.
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
<div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br />Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/source.png" alt="Parent" title="Parent" />
<br /> Parent
</a>
<div class="navchild">
<ul> <li>Child</li></ul>
</div>
</div>
</div>
You can simply hide all child divs when clicking on parent.
$('.navmobile').find('.navchild').hide()
You can add a line to just hide all .navchild elements, then the one for the click will open.
jQuery(document).ready(function($) {
$('.navchild').hide();
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
Or you can just set the .navchild element to be hidden by default in the CSS. (Generally a more efficient way to handle this).
jQuery(document).ready(function($) {
$('.navparent a').click(function(){
$(this).parent().find('.navchild').slideToggle(90);
});
});
.navchild { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navmobile">
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
<div class="navparent">
<a href="#">
<img src="/dcls_rebuild/themes/custom/dcls/images/mylib_color.png" alt="My Library" title="My Library" />
<br /> MY LIBRARY
</a>
<div class="navchild">
<ul> {{ page.main_navigation }}<li>testestsetsetestsetsetsetsetsetes</li></ul>
</div>
</div>
</div>
.navchild { display: none; }
when you click on a parentnode, have the jQuery hide all of the children nodes except the one toggled:
jQuery(document).ready(function($) {
$('.navchild').slideToggle(90);
$('.navparent a').click(function(e) {
e.preventDefault();
// determine what div is open
var $this = $(this).parent().find('div');
// hide all divs except this one
$(".navparent div").not($this).hide();
// toggle selected div
$this.slideToggle(90);
});
});
working fiddle: http://jsfiddle.net/iamthejonsmith/BGSyS/900/
Related
I'm trying to move the #whatsOnLink to below the "Get a Quote" button across the site using jQuery and I'm having trouble on the jQuery side of things. If I remove the additional part of .button from the target then it will move fine but I need it to go inside the holding div.
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
Any help is appreciated.
Regards,
Kieran
Use this
$(this).closest('div[class^="grid_3"]').find('div .button')
Instead of
$(this).closest('div[class^="grid_3"] div .button')
$(document).ready(function() {
$('div[class^="grid"] a#whatsOnLink').each(
function() {
$(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
You could use .next()
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
// OR
// $(this).appendTo($(this).parent());
});
$('div[class^="grid"] a#whatsOnLink').each(function() {
$(this).insertAfter($(this).next().next());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
<div class="cheapest-body">
<div class="cheapest-heading">
<p>BEST VALUE</p>
</div>
<a id="whatsOnLink" href="">Test</a>
<p class="latest-type">Silver apartment
<br>from <span class="latest-offer-price">£75</span> <span>pp</span> <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
</p>
<a class="button bookingEngine button-red" href="">
<span>Get A Quote</span>
</a>
<img src="" class="grey-out-overlay">
</div>
</div>
I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working
You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo
Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();
I am working on a simple gallery for my site.
Demo: http://jsfiddle.net/fdr6y6y7/
I have a large image that changes when you click a thumbnail underneath it.
However, I have an issue. Each 'large' image has a link to itself in a new window, however you can see that the original main image link never changes.
For example, if I click the 2nd thumbnail image the hyperlink inside the largeimg div should really change to http://placehold.it/250x250.
Can I use jQuery to do this?
$('#thumb_scroll a').click(function(event){
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largelink').attr("href", $(this).attr("rel"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<img src="http://placehold.it/200x200" />
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<img src="http://placehold.it/100x100" />
</li>
<li>
<img src="http://placehold.it/100x100" />
</li>
</ul>
</div>
</div>
</div>
Thanks to the Anon SO user for this: http://jsfiddle.net/fdr6y6y7/1/
$('#thumb_scroll a').click(function(event) {
$('#largeimg img').attr("src", $(this).attr("href"));
$('#largeimg a').attr("href", $(this).attr("href"));
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="largeimg" class="largeimage">
<a href="http://placehold.it/300x300" target="_blank" class="main">
<img src="http://placehold.it/200x200" />
</a>
</div>
<p> </p>
<div id="thumbouter">
<div id="thumbnails">
<div id="thumb_scroll">
<ul>
<li>
<a href="http://placehold.it/300x300" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
<li>
<a href="http://placehold.it/250x250" class="thumb">
<img src="http://placehold.it/100x100" />
</a>
</li>
</ul>
</div>
</div>
</div>
I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!
You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});
use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.
When the user hovers over the link with the class "thumb" the closest link with the class "title" should have the class "media-link-hover" applied to it. How can this be done?
I tried closest() and also this but nothing seems to be working:
$('a.thumb').hover(function() {
$(this)
.prevAll('.block')
.find('a.title')
.addClass('media-link-hover');
}, function() {
$(this)
.prevAll('.block')
.find('a.title')
.removeClass('media-link-hover');
});
HTML:
<article class="block">
<div class="inner-left">
<a class="thumb" title="" href="">
<img width="198" height="111" alt="" src="" />
<span class="media-overlay">video</span>
</a>
</div>
<div class="inner-right">
<a class="title" title="" href="">Hello</a>
<div class="description">
<p>Hi there</p>
<a class="teaser" href="">Hola</a>
</div>
<div class="media-stats">
<span class="finder">Found by <strong>Me</strong> 1 month ago</span>
</div>
</div>
</article>
Works with closest('.block')
http://jsfiddle.net/yBwSN/
Try with parents() and also you can reduce the code by using toggleClass().
Demo http://jsfiddle.net/elclanrs/Ce8fu/
$('a.thumb').hover(function() {
$(this)
.parents('.block')
.find('a.title')
.toggleClass('media-link-hover');
});