I have a toggle slide which does not work. Spend hours trying/learning to edit and rewrite this thing, but somehow the visbible and inviseble slidetoggle doesnt work.
Could someone please help me with the js script: SEE THE FIDDLE
JS:
$('.header .ullie').hide();
$('.header h2 a').click(function() {
$(".header h2").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
$('.header h3 a').click(function() {
$(".header h3").not(this).next(".header .ullie").slideUp("slow");
$(this).next(".header .ullie").slideToggle("slow");
return false;
});
HTML:
<div id="foldercontents">
<ul class="ullie">
<li class="header">
<h2>testbutton</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 1</li></ul>
</li></ul>
</li>
<!-- second, duplicated from first -->
<li class="header">
<h2>testbutton2</h2>
<ul class="ullie">
<li class="foldercontent">
<h3>title</h3>
<ul class="ullie"><li>row 2</li></ul>
</li></ul>
</li>
</ul>
</div>
SEE THE FIDDLE
*ADDED JQUERY LIBRARY
I assume you're looking for something like this
$('ul li ul').hide();
$('.header > * > a, .foldercontent > * > a').click(function () {
$(this).parent().siblings().slideToggle("slow");
});
You could also use margin:0; padding:0; to prevent the jumping instead of overflow:hidden, but that's up to you
Also note that you don't need the <a> tags, you could apply them to just the headers themselves if you'd like to
Related
I am very new to jquery.
I just need to update div content and link url on single click.
here I am working on this code.
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
I need to update price div based on above link click.
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thanks
You can try something like"
$(".price").on('click', function(){
var clickedPrice = $(this).data('price');
$('#result_price').html("$" + clickedPrice);
});
<ul>
<li class="price">$9</li>
<li class="price">$5</li>
<li class="price">$3</li>
</ul>
<div id="result_price">$0</div>
Use .class selector and .attr() to change the href.
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
You can update price div based on ul > li > a click. Try below code
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thank you.
Right now, I'm trying to build a vertical menu that will have a drop down sub menu below it.
Below is my HTML and the jQuery function I am using:
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var $el = $('ul', this);
$('#menusomething > li > ul').not($el).slideUp();
$el.stop(true, true).slideToggle(400);
});
$('#menusomething > li > ul > li').click(function(e) {
e.stopImmediatePropagation();
});
});
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
Figured out the answer for anyone who sees this. First had to move the closing li tag from chapters to the end of .submenu Then used this and now it works as wanted.
$(function() {
$('#menusomething li > .submenu').parent().click(function() {
var submenu = $(this).children('.submenu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(400);
} else {
$(submenu).slideUp(400);
}
});
});
The following code does what I believe you desire: Have a <ul> element that is the nextElementSibling of the first level <li> element slide open and closed when it is clicked. As you mentioned in comments that you desired, it now starts closed due to adding style="display: none;" to the <ul>.
Note: From a user interface perspective, the <li> entries which don't have sub-menus, or are otherwise links, should not have the text enclosed in <a> tags. With the <a> tags the user will think they are clickable, when a click does nothing. This is confusing to a user. It appears that you may have some be sub-menus and some be direct links. If possible, there should be some visual difference between the two types to hint to the user as to what will happen when they click.
Along with other issues, your HTML has nothing that will match either the '#menusomething > li > ul' or the '#menusomething > li > ul > li' selectors. Specifically, you have no <UL> elements that are children of <LI> elements.
$(function() {
$('#menusomething > li').click(function(e) {
e.stopPropagation();
var nextSib = this.nextElementSibling;
if(nextSib && nextSib.nodeName === 'UL') {
//If we get here the nextSib exists and is a <UL> that immediately follows
// the <LI> which was clicked.
$(nextSib).slideToggle(400);
}
});
$('#menusomething > ul > li').click(function(e) {
console.log('Clicked on chapter: ' + this.textContent);
e.stopImmediatePropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="navmenu">
<ul id="menusomething" style="padding-left:30px">
<li>HOME</li>
<li>ABOUT</li>
<li>CHAPTERS</li>
<ul class="submenu" style="display: none;">
<li>Dallas</li>
<li>Los Angeles</li>
<li>New York</li>
<li>Northern California</li>
<li>Orange County</li>
<li>Phoenix</li>
<li>San Diego</li>
<li>Washington DC</li>
</ul>
<li>MEMBER SERVICES</li>
</ul>
</div>
Hi I have a navbar in my home.scala.html as follows-
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
I am trying to set active class on click as follows-
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
However on running the application only the li elements which have href="#" get set as active ,the other li elements remain inactive on click even though the page is redirected to the link of the tag.
Any help would be appreciated.
Thanks
Edit:The structure of the main.scala.html is
<html>
<head></head><body>
<ul class="nav nav-justified">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout">#Messages("views.main.logout")</li>
</ul>
</div>
</nav>
<div id="showsspData">
#content
</div>
</div>
</body>
</html>
Then the apps.scala.html will be as-
#main("string to pass"){
//html content for page
}
You need to use e.preventDefault() to prevent default action of the anchor and target .click() handler on the anchors instead:
$(document).ready(function () {
$('ul.nav > li a').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).closest('li').addClass('active');
});
});
I have an accordion menu that the active link drops down the menu, loads an external page into a div, then changes the banner on the same click. I have everything working except for the banner image changing out. I thought I had the code right, but something seems to be missing, and I can't figure it out.
Here is my html:
<section id="commercialBanner">
<img src="images/catalog/indoorBanner.jpg"/>
</section>
<section id="accordionNav">
<ul id="nav">
<li id="indoorEntrance" class="category"><a class="ext" id="indoor" href="montage.html">Indoor Entrance</a>
<ul id="indoorEntranceSubmenu" class="sideSub">
<li>Ecomat Squares</li>
<li>Gatekeeper</li>
<li>Absorba</li>
</ul>
</li>
<li id="outdoorEntrance" class="category"><a id="outdoor" class="ext" href="aquaFlow.html">Outdoor Mats</a>
<ul id="outdoorEntranceSubmenu" class="sideSub">
<li>AquaFlow</li>
</ul>
</li>
</ul>
<section id="catalog"></section>
Here is my Script:
$('a.ext').click(function (event){
event.preventDefault();
$('#catalog').load(this.href);
});
$('.category > a').click(function(evt) {
if ($(this).attr('class') != 'active'){
$('#nav li ul').hide();
$(this).next().show()
// $(this).next('li > a').trigger('click')
$('#nav li a').removeClass('active');
$(this).addClass('active');
};
if ($('#indoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/indoorBanner.jpg");
};
if ($('#outdoor').attr('class') == 'active'){
$("#commercialBanner img").attr("src", "images/catalog/outdoorBanner.jpg");
};
});
You seem to be checking the class attribute incorrectly - you have more than one class on an element, so:
$('#indoor').attr('class') is 'ext active' or 'ext'
As noted by #epascarello: use hasClass("active").
See this:
jQuery's attr - return multiple classes not just the 1st
Show / hide does not work IE7.
In the other browsers work fine.
Help me please.
Am I doing something wrong?
<div id="secondary_nav" class="box">
<ul>
<li>test</li>
<ul class="sub-menu" style="height: 336px; display: none;">
<li>test</li>
</ul>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#secondary_nav ul li").hover(function() {
$(this).next(".sub-menu").show();
$(this).next(".sub-menu").hover(function() {
$(this).show();
}, function() {$(this).hide();}
);
},function() {$(this).next(".sub-menu").hide();}
);
});
</script>
You first need to fix your markup. A sub-menu goes in the the same li as the link that represents it:
<div id="secondary_nav" class="box">
<ul>
<li>
test
<ul class="sub-menu" style="height: 336px; display: none;">
<li>test</li>
</ul>
</li>
</ul>
</div>
Next you have some issues with your $.hover() where you're performing an additional nested hover within the over state of the first. Let's clean that up as well:
$(function(){
$("#secondary_nav > ul > li").hover(
function(){ $(".sub-menu", this).show(); },
function(){ $(".sub-menu", this).hide(); }
);
});
​Fiddle: http://jsfiddle.net/4KFac/
The HTML code is broken. You can't have an ul tag directly inside another ul tag.
It works fine for me http://jsfiddle.net/Ln8ep/1/
Try to use $(document).ready(function() {