How can I get toggle to collapse? - javascript

I have a working toggle function that expands and collapses but my list when expanded is very long and I wanted to put a "Close" link at the bottom to enable collapse so my users don't have to scroll to top to click and collapse. Any ideas how I can modify this code to expand it's functionality for my purposes?
<script language="javascript">
$(function(){
$(".formname").toggle(function(){
var id=$(this).attr('id');
$("#form"+id).fadeIn('slow');
},function(){
var id=$(this).attr('id');
$("#form"+id).fadeOut('slow');
});
});
</script>
my html looks like:
<ul>
<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
</ul>
</div>
</ul>
if I insert the same link li at the bottom before the closing ul the user has to click it twice to collapse. I'd prefer a single click solution.
<ul>
<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>
</ul>

If you use toggle() event on formxyz, the new close action will break the original rule, therefore sometimes you have to click formxyz twice to show content.
So use click() event with fadeToggle() action on formxyz. It will show content while it's hiding.
Then add a class on all "close", use parents method to find it's parents div (it should be the content div), then hide it.
The html:
<div style="background-color: gray">
<li>My Expanding/Collapsing Data</li>
<div id="formxyz" class="content" style="display:none">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>​
</div>
The js file:
$(function(){
$(".formname").click(function(){
var id=$(this).attr('id');
$("#form"+id).fadeToggle('slow').focus();
});
$(".closeform").click(function(){
$(this).parents("div.content").fadeOut('slow');
});
});
​
OR Check emulate code on jsFiddle. It's executable.

<li>My Expanding/Collapsing Data</li>
<div style="display:none;">
<ul>
<li>Content</li>
<li>Close</li>
</ul>
</div>
An id should be used for a single element. Never ever use the same id for more elements.

Related

Check if element has the class active, if so, add class to a different element

Building a website for a client but only for the mainpage I need to get a class on the main div for css purposes. For this I am trying to look for an active class on menu item for home, and if it has the active class, then add a different class to the main webpage's div.
so far i cant get much further then this:
<script>
$(document).ready(function() {
if $('li.level1.item101').hasClass('active');
$('#main').addClass('woodwork');}
});
</script>
the html involved for this (the li item) looks like this when active with the div somewhere down below in the page itself
<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
<div id="main"> </div>
my current code doesn't seem to be able to grab either the active li or the div, any help would be greatly appreciated
First of all, you have some errors with your code, the html should be:
<li class="level1 item101 active current"> active</li>
<li class="level1 item102"> second</li>
<div id="main"> main </div>
and the javascript:
$(document).ready(function(){
if ( $('li.level1.item101').hasClass('active') ) {
$('#main').addClass('woodwork');
}
});
Here is a working fiddle
If this is your HTML
<ul>
<li class="level1 item101 active current"> </li>
<li class="level1 item102"> </li>
</ul>
<div id="main"> </div>
The JavaScript should look like this
$(document).ready(function(){
if ($('li.item101').hasClass('active'))
$('#main').addClass('woodwork');
});
Here I just look if the Listelement with the class item101 has the class active, if it is so I give the div-Tag with the ID main the class woodwork

How to slideToggle() parts of menus?

Suppose I have a list menu:
<html>
<body>
<div id="menu">
<ul>
<li>News
<ul class="inner_menu">
<li>Hi</li>
</ul>
</li>
<li>Bumble
<ul class="inner_menu">
<li>Hellos</li>
</ul>
</li>
<li>Scratch</li>
<li>Snap</li>
</ul>
</div>
</body>
</html>
And I want all unordered lists be hidden but slidedown/up (jquery slideToggle()) if you hover above the 'li' element in which they are nested. I am having problems with selecting the right elements. E.g. I want to slideToggle() .inner_menu with 'Hi' when I hover above "News".
So far I have been able to slideToggle() all of the .inner_menus or get different unwanted results. I think I can just add bunch of different 'id's but that would be just so messy, considering two similar menus with a lot of inner_menus.
You could use hover in/out handler:
DEMO jsFiddle
$('li').hover(function(){
$(this).children('ul').slideToggle();
});

jQuery: Simple way to slideToggle multiply elements independently (and similar questions)

Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE

jQuery hide an element if another element contains text

I have a div that I wish to hide using jQuery, only if I'm in a certain category, so I want to base the hiding of the div based on my breadcrumbs. I think I have the jQuery right, but it isn't hiding the div?
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li>Tshirts</li>
<li>Mens</li>
</ul>
</div>
<div class="hide-me">I want to hide</div>
<script type="text/javascript">
jQuery(window).ready(function(){
if(jQuery('.breadcrumbs ul.nav li:nth-child(2)').text() == "Tshirts"){
jQuery('.hide-me').hide();
}
});
</script>
jQuery('.breadcrumbs ul.nav li:nth-child(2)').text()
Is strange, why are you hardcoding this so much? You're specifically asking for that list, and only if it is within a very specific tree.
It would be easier if you just changed your HTML
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li id="secondlist">Tshirts</li>
<li>Mens</li>
</ul>
</div>
and then
$("#secondlist").text() == "Tshirts";
Check if
$('.breadcrumbs ul.nav li:nth-child(2)').text()
is really getting the value, I think that is the principal problem.

How to add CSS dynamically to the Menu Items

I want to Highlight the Menu Dynamically in Html Pages using Js.
For Example
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES
<ul>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</div>
I given Like this. But its not working
<script>
$(document).ready(function() {
$("#cssmenu ul li").click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
});
For this i would like activate the Menu when it is Clicked Using Js. Please Help me.
Thanks in Advance.
I have a demo for you here: http://jsfiddle.net/ttaN2/4/
I have altered the HTML so that there are correct open and close tags:
<div id="cssmenu">
<ul id="myid">
<li id="m1">COMPANY</li>
<li id="m2" class="has-sub">SERVICES</li>
<li class="has-sub">Enterprise Solution
<ul>
<li>SAP</li>
<li>Oracle</li>
</ul>
</li>
</ul>
</div>
I believe this is what you intended. I am not sure what you intended to happen when you click on another sub menu though. I'll try to help you out if you can describe exactly what you intend to happen.

Categories

Resources