JQuery :: Simple Expand/collapse List : Big Gap Of Space After The List?
Jun 2, 2010
I have been trying to make an expand/collapse (essentially accordion) list. So far, everything works and looks fine in Firefox, Safari, and Chrome, but in IE8, the page height is static when it loads, with a page height being as if all headers in the list were expanded. The expand/collapse functionality works,but as you can imagine, there is this big gap of space after the list.
The html markup uses <h2> tags for the always-visible header portion and a <div> for the expanding/collapsing content. The <div> content contains form elements and everything is enclosed in a form tag.Anyways, here is the jQuery code:
$(document).ready(function() {
$('<img src="plus.png" class="icon" />').prependTo('.header');
$('.content').hide();[code].....
View 5 Replies
ADVERTISEMENT
Jan 28, 2011
I found a decent way to include a toggle feature for displaying detail rows underneath "parent" rows in a regular old HTML table displaying heaps of data: [url]
See "Expandable "Detail" Table Rows" rows section.
Would anyone know what it would take to add an "expand all/collapse all" link that would toggle all child rows open/hidden?
If so, how difficult would it be to have multiple tables with this functionality on the same html page?
View 10 Replies
View Related
Feb 18, 2010
I've made a animated collapsable list using this script. But now I want to keep one submenu expanded, I have the ID of the ul that must be kept expanded. So after everything is collapsed my script checks the ID of every submenu and compares it to the given ID. If the ID of the submenu is equal to the given ID, the submenu should expand. Should, because that doesn't. Here's the code:
[Code]...
I've never used jQuery before, I tried this, but it doesn't work. Also, I don't want to toggle the children, but just show them; without an animation.
View 2 Replies
View Related
Jun 3, 2009
I have created a simple portfolio item for a site I am working on, with left and right buttons to move between the visible thumbnails in the portfolio.
The problem is this: when I click on one of the left or right buttons used to scroll the active list items, it resizes the space between all of the thumbnails by 1 pixel per click, up to 10 clicks.
Here is the markup and my javascript:
View 1 Replies
View Related
Jul 23, 2005
I have a list built on HTML and CSS:
<ul>
<li>Foo</li>
<li>Bar
<ul>
<li>Gee</li>
</ul>
</li>
</ul>
I need a script to expand and collapse items so only one sublist is visible
at a time. I've found several scripts for trees but they either need the
list to be in their own format or they add tons of weird code to insert
icons and style the list (which breaks my design). Could you recommend me a
simple script to do so?
View 4 Replies
View Related
Jun 25, 2009
I would like to ask what must i change and in which file / line so i can have instead of on hover and closing automatically the ability to expand by myself and close myself the menu with accordion list choise...the site preview is: [url]
View 5 Replies
View Related
Jan 19, 2010
Right now when someone clicks on my listbox I immediately do an update on the form to populate the selected item.
Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list.
View 1 Replies
View Related
Jun 29, 2010
I have a php function that returns a list of people with their attributes ie address, telephone, email, etc. my idea is to display the full name of person, and then when I click on a link "more data" open a window down to display the other data, email, phone, etc.., for this use a jQuery script that collapses / expands a div, taken from: [URL], the script works fine, but only runs on the first element (person) that appears in the list in the other script is not running, if I have several pages of results, always work the first item on the list. this is the javascript code of the page, obviously this liibreria declared jquery:)
$ (Function () (
$ ("# Mmm.") Click (function (event) (
event.preventDefault ();
$ ("# Panel_menu"). SlideToggle ();
[Code].....
View 5 Replies
View Related
Jan 18, 2010
I've created the following page: [URL]. When you click on the "More" or "Close" links to expand and collapse the grey content boxes they start to impact the layout - try clicking them a couple of times to see. I've tried heaps of combinations but can't figure this out. Something must be adversely affecting the DOM.
View 2 Replies
View Related
Jun 18, 2010
I was just getting started to learn about how to have expand and collapse effects, I work on css and html, but I saw collapse and expand effect on few website, so I wanted to learn it. I am just a starter in JavaScript and jQuery.
View 7 Replies
View Related
Aug 21, 2011
I have a button that I want to be able to click on and for it to change to another image and also slide out a text panel and then when clicked the text panel slides back in and the button returns to its original state.
The code that i have found and adapted is below. So far I have it working to click on the button to expand but then I can only make it click on the panel to close not the actual button.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
[Code].....
View 7 Replies
View Related
Jul 25, 2009
I'm looking for an expanding/collapsing tree directory type of navigation and was wondering if someone knows of a good one that's out there and available.
What I'm specifically looking for is one that is triggered on the click of a *graphic* that toggles the show/hide. Each text nav item should be hyperlinkable to it's own link/page. So for example (the + and - are the collapse/expand graphics, the dot leader is for some formatting) [code]...
View 3 Replies
View Related
Mar 10, 2009
Is there a way to make a node in the treeview expand/collapse ONLY if the +/- is clicked but not the folder icon or folder name but still make the node selectable?
View 4 Replies
View Related
Mar 3, 2010
I want to prevent expand/collapse behavior when clicking on a node (folder) in the tree. I only want to expand/collapse when clicking on the plus/minus sign (+/-).
I have tried to use stopPropagation on the click event but I don't getit to work.
View 2 Replies
View Related
Jan 19, 2010
I am trying to do something like this:
user selects "other" from a list box and a input box's display property is set to block.. (i.e., show). At the moment I am getting an error on the following line
<label for="activity">Error Type*</label><select size="1" name="ractivity" onChange="checkId(this)">
error: object expected?
HTML
Code:
<label for="activity">Error Type*</label>
<select size="1" name="ractivity" onChange="checkId(this)">
<option value="select" selected="selected">-select-</option>
<option value="Browser Difference">Browser Difference</option><option value="CSS">CSS</option><option value="Other">Other</option>
</select><br/> .....
View 2 Replies
View Related
May 24, 2006
My intent is to be able to expand/collapse multiple tables individually, and all at once. My current implementation allows for the "individual", but not the "all at once" functionality, because the current code I'm using just toggles. code:
View 2 Replies
View Related
May 18, 2010
it's not expanding & collapsing for me. Here's what I have:
Head:
PHP Code:
<script language="JavaScript" type="text/JavaScript" src="js/collapse_expand_single_item.js"></script>
Body:
HTML Code:
<img src="img/u.gif" name="imgfirst" width="9" height="9" border="0" >
[Code]....
View 2 Replies
View Related
Jan 20, 2009
Been looking for a way to do:
[URL]
BUT, without needing a framework (jquery,mootools,scriptalicious,protoype,dojo,etc). I don't need all the extras that come with the framework and want to keep loading time down to a minimum.
Everywhere online seems to need a framework.
View 3 Replies
View Related
Aug 11, 2007
I realize that expanding/collapsing DIV scripts are common but I can't find one suitable for my code. Most of them seem to rely on a unique DIV ID. I have the following XHTML code on my page.
Code:
<div id="container">
<h1>List of Events Happening:</h1>
<div class="event">
<div class="eventtitle">
<h1>Event 1</h1>
<p><a href="#">[ expand++ ]</a></p>
</div>
<div class="eventbody">
<!-- stuff -->
</div>
</div>
<div class="event">
<div class="eventtitle">
<h1>Event 2</h1>
<p><a href="#">[ expand++ ]</a></p>
</div>
<div class="eventbody">
<!-- stuff -->
</div>
</div>
<div class="event">
<div class="eventtitle">
<h1>Event 3</h1>
<p><a href="#">[ expand++ ]</a></p>
</div>
<div class="eventbody">
<!-- stuff -->
</div>
</div>
<!-- etc. -->
Basically I want my link to expand the .eventbody for the particular .event and there could be an unlimited number of .events. I'm not sure how to go about achieving this. I've already got a script that toggles the display(block or none) for a DIV, but it relies on a specific DIV ID.
View 8 Replies
View Related
Oct 20, 2005
I have bit of PHP that creates tables on the fly. I found a bit of javascript that works on static tables, but not very well with 'on the fly' tables. It works to the point where the expand/collapse link works on only the first table on the page. For example, 4 tables will be created when the page compiles. If I try to use the expand collapse thing on table 4, it will only affect the first table.. same with the second and third tables.
Is there a way to make all this code dynamic? Maybe make the ID dynamic or a different way other than document.getElementById? Code:
View 5 Replies
View Related
Jan 18, 2011
I want to add a + - for collapse and expand all. I would prefer to have them change accordingly but it isn't necessary.
This is my javascript:
var toggleMenu = {
init : function(sContainerClass, sHiddenClass) {
if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
var arrSubMenus, oSubMenu, oLink;
for (var i = 0; i < arrMenus.length; i++) {
arrSubMenus = arrMenus[i].getElementsByTagName('ul');
for (var j = 0; j < arrSubMenus.length; j++) {
oSubMenu = arrSubMenus[j]; .....
This is my html code:
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script> .....
View 9 Replies
View Related
Apr 3, 2010
I want to make a menu. I did google for it. [URL]
but its too simple.
This is what I need to do.
Tab 1
Tab 2
Tab 3
By default tab 1 should be open. when I click on tab 2, tab 1 should collapse and tab 2 should expand.
View 2 Replies
View Related
Jun 21, 2007
I have a javascript to expand and collapse content in 3 ways (all items, one item and nothing).
I have written a javascript myself but the iconcs that are used to switch between modes don't show correctly in IE7, not always then. Here's how it should work:
Default expand one, expand all, expand nothing is loaded from a cookie. If not available, expand all will be executed.
If you click on an icon an event goes which does 3 things: changes the event of the image in the browser (so open_all becomes open_one, this is how I make it switch).adds style="display: none;" to the other element and makes this one visible.saves the new state to a cookie. Code:
View 3 Replies
View Related
Sep 10, 2002
I have some server-side code that creates a table from a database query. The basic idea is that there are group leaders and each leader has one or more members. I created the ID dynamically from the query.
When a user clicks the button next to a group leader, the members should hide or show, opposite of current display. Code:
View 5 Replies
View Related
May 26, 2010
how to store the status of a expand and collapse?
View 4 Replies
View Related
Oct 11, 2011
I started some programming with Javascript.I'd like to use it to expand/collapse some headers in a page. I made following code to do this.:collapse-expand.txt.That works perfect!But I want to add something, and I have some problems with that. As I have e.g. 4 headers, I want to expand the text (in <p>-tag) by clicking on header 1. When I click on header 2, I want to collapse text of header 1 and expand header 2 text.And so on.That way, I get the height of the site relatively small without needing to scroll.I don't quite know how to implement this function into my JS-code!And if it could be implemented in my .js file, how do I link that in my html, because now I have in every header the same line:<a href="#first" onClick="shoh('first');">, <a href="#second" onClick="shoh('first');">, etc..How can I get the content of header 1 be seen as soon as the screen pops up. So you don't have to click on Header1 before you can see it? And then go on from there: clicking on header2 makes text of header 1 disappear and expands text from header 2, and so on.
View 24 Replies
View Related
