JQuery :: Making SlideToggle Collapsible Like An Accordion?
Jun 13, 2011
I have a slideToggle div, when clicked slides down like a normal slideToggle. However, I have multiple slideToggle divs on top of each other, similar to an Accordion. Is there a way to use the collapsible characteristic for slideToggles like used in an accordion? Meaning when one slideToggle div is open, and then another is clicked, the previously opened one automatically closes. I am trying not to use an accordion due to other factors with my site.
I'm trying to add a slideToggle to a paragraph in a Wordpress blog page. The following code works for triggering an alert, but when I replace the alert with the slideToggle, nothing happens.Here's the alert:
Taken right off a jQuery API page, inserting my own id names .The "#principles" is the id of a span of text just above a paragraph with an id of "p=principles".
Currently, the script allows you to click on a piece of the accordion to open it, but it is set to close on mouseleave. When I set the mouseleave to .click, it gets confused and doesn't know what state it is in. The code controlling this is below, and the full script is in haccordion.js linked in the page source.modify this script,
Recently I've been using a .slideToggle script to show big images when thumbnails are clicked.
However, the <div> that is revealed does not Toggle Up when multiple thumbs are clicked, so I'm left with a bunch of open <div>s on the page.
I'm not sure what to do -- I think it has something to do with the siblings of the class "largeexamples" but I'm not sure. I've also been reading about eq, but I'm not there yet.
I created an accordion menu with rollover sub menus. My question is there a way to stop the rollover effect in the sub menus until the accordion animation is finished? When I click on a category link on the accordion the sub menu links flashes until the animation is done.
I'm just starting to learn JavaScript and have been playing around with jQuery. I'm trying to make a collapsible list. I've got part of it working and am having trouble getting the rest to work. I'm using a unordered list, if you click on Category 1 or Subcategory 1 it works exactly as I want them to but none of the others work. I sure I need some kind of array to get the others working, but I'm not sure where to start? This list is queried from a database so Categories, Subcategories, Items will vary, but this is the basic structure.
Im making a table that has collapsable/expandable rows and im having a bit of trouble. i started using the code from this site[URL].. post/20 lugin.aspx but where as this one has one row which is clickable to reveal the one underneath it, i need to reveal the next 2 underneath.
[Code]...
but this only reveals the first hidden row for the one i clicked. i need both to toggle. im new to jquery so havent mastered the selectors yet.
I have a following menu that I'd like to be collapsible. <ul id="#menu-sidebar"> <li>Menu item 1 <ul><li>Menu item 1.1</li> <ul></li> <li>Menu item 2 <ul><li>Menu item 2.1</li> </ul></li></ul> This collapses and expands them, but of course all at same time. $('#menu-sidebarli ul').hide(); $("#menu-sidebarli").click(function(){ $("#menu-sidebarli").toggle(); $(this).toggleClass("active"); }); I've been trying to experiment with the .next() trying to get the next ul li ul element but with little luck. $('#menu-sidebar li ul').hide(); $("#menu-sidebar li").click(function(){ $("#menu-sidebar ul li").next().toggle(); $(this).toggleClass("active");
I started a thread here about the Filament Group's Collapsible Plugin, wherein I modified the plugin to hide any exposed content when an new header is clicked, but I wanted to make it even better, by expanding hidden content if a user arrives at a page via a link with a url fragment identifier. The 1st thing I needed to do was add IDs to all the header elements. I discovered that in Chrome, the page was rendering before the IDs got inserted, so to solve that I moved the code to a separate file that executes before the plugin. Here's that code ('fragment.js'):
Code:
$(function(){ $('h5.accordion').each(function(index) { $(this).attr({ 'id': 'faq-' + index
[code]...
This works fine if the link to the fragment is on a different page than the collapsible content, but if the link is on the same page, the collapse/expand events fail. I think it's because clicking a link with a url fragment doesn't send a server request -- it just fires off a 'scroll this page' instruction client-side. So even though the url in the address bar changes, any expanded content stays open, and the target doesn't expand.
I'm attaching a ZIP if anyone wants to look at this. Navigate to collapsibleemplatesfaqest.htm and click the 1st or second link -you'll be directed to collapsibleemplatesfaqindex.htm and the page will scroll to the correct item and expand it.Now try clicking the link at the top of index.htm (Test Link 1) or the one inside Details 3 (Test Link 2). The page will scroll, but any expanded content will remain so & the target won't expand.
I have writen(as you can see i am not a jQuery expert :P ) a small piece of code for a ul/li collapsible menu, all browsers do what i want but IE8 is not working propper.
jQuery("a.cat_w_sub").toggle(function(){ if (jQuery(this).next("ul").is(":hidden")) { jQuery(this).next("ul").slideDown(100); jQuery(this).addClass("cat_open");
[Code].....
I have used the jQuery ui accordion first but this wasn't work that well, so i switch to this piece of code
The bug/error: well if i click on the menu(which is closet at first) it doesn't open at first but once i click on it, it opens and closes.
By using this tutorial Stylish Collapsible Fieldset using CSS3 and JQuery, I have created asp.net web form with collapsible fieldsets. When this web page/form loads all the fieldsets at that time they are collapsed/closed but when user clicks on any legend the fieldset becomes expand/open.
Now I want to add another feature that when user finishes entering data in the controls of first fieldset and he/she wants to move to the very next fieldset. Then he/she (currently in the last control (that may be a textbox or a dropdown list) of the previous fieldset) can open/expand ***only*** the very next fieldset by just hitting/pressing tab from the keyboard.
Is there a way to tell the state of slideToggle? My problem is I have two buttons that change a div and also toggle it open/close. But if you click one button then click the other, the changes take effect and then it will close. So is there something like if(slideToggle() == open) or something along those lines?
i'm using slideToggle which reveals a large element upwards;
[URL]
Given that the element revealed is very high the anchor tag that is used to show/hide sometimes disappears. I've tried return false; but that doesn't fix it
I use two jQuery plugins in my page : slideToggle (for a top panel) and wslide (for showing two examples with images and captions).The problem is, the content of my wslide goes down and downer each time we open the toppanel. Is there any way of getting around this problem and make the content stick to where it should be? Here's some code :
I'm using a slideToggle() to show or hide a div in the bottom of my page.When the div is shown the view don't "follow" the div that is appearing.How can i make the view sliding down with the div that is appearing?
This works fine, except if you move your mouse over the child-element before the animation is complete.then it gets stuck in an endless bouncing up and down loop. Tried so many different possibilities with flagging the element while it was animating, stopping animations, adding delays and what not.
I am trying to make a form that collects "Number of Children" a parent has. If they select "4" from the select input, then I want to slidetoggle out the appropriate divs, one for each child.
[Code]...
I have been able to use slidetoggle in the past when attached to a button, but this one has me lost. Anyone know how to accomplish this?
For my work i need to make a form. At some points you have to choose an option from a dropdown select box. After you have chosen one of those some other field appear under the dropdown thing. I use the slideToggle event for this effect. In firefox its all working fine, but in ie 6.0 and 7.0 it doesnt work. What do need:A dropdown menu with a few options in it. You can choose one of those and after you select it a few other options apear under the dropdown menu.
I just included some Jquery on my portfolio page. Every project slide open and close when you click on it. [url]
But I just found out that it doesn't work in Firefox on my mac. It does in Safari (I can't test on windows).
I put everything in a <dl id=workcontent>, so the project names in a <dt> and the content in <dd>. I let Jquery look for the <dt> and if you click on it, it will slide open.
Just like in the tutorial on the jquery page. Also all the subheadings are missing, you can only see the first one (video), but there are more (animation, web, other).
Now where does the problem lie? Should I use all <a> links instead of <dt> ? And how can I let Jquery act the same way then as it does now?
I'm trying to piece together a little div which slides out and shows various links to sites like Digg, Reddit to share the story with. I've got it kind of working but when there are multiple divs on the page, named the same like in each article of a post on a Wordpress blog. Only the top ones work and the rest don't do anything...I'm trying to get it do something like the image => HereThis is an example I'm trying to get to work but the second "slickbox" div never shows
I am trying to get my divs to resize but i am having a number of difficulties. I am new to jQuery so be gentle! Here is what i am trying to achieve:
1) When the "About me" div is clicked - resize the "About Me" div and hide the other divs. (Which i have managed to get working)
2) When the initialanimation has finished, wait for another click before resizing the div to its original size/position. (This is working but I have had to use the delay function to "pause" the animation - which is not ideal).
I need to toggle my lists independently within my <sidebar> div. As current, it will minimize or maximize them all upon click. My aim is for them all minimized to begin with, and upon individual selection, i wish them to maximize. Heres what i currently have:
