Expand and Collapse of menu with round corner with "expand image" and "collapse Image".
i have attaching a link for reference [URL]
In this in place of '+' icon replace as "expand image" as well as '-' icon
like tree menu
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> .....
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.
I used the script from this website to create an expanding and collapsing sitemap bar at the bottom of my page. What I can't find is a solution to the menu expanding up over the content instead of expanding downwards.
Collapsed
http://joylee.net/id01/processblog/images/sitemap_collapsed.gif
Expanded
[code].....
I am developing a menu using javascript wherein, I expand and collapse divs. It works fine individually; but the problem arises when I try to hide all other divs on expanding one div. Following is the code. any change if you spot any error or even
<head>
<script>
function hideDivs(){
var arr = document.getElementsByTagName('div')
[Code]....
I wrote my first script, which was designed for innerHTML, and tann I found a website which showed me a few things. It showed me how to use two links per harder, one shown, one hidden, and they just swap out. The final outcome allows ot to do almost any and everything I want ot to.
First and foremost, here is the script:
function veksle(id,vi){
eclipsed = document.getElementById(id+"co");
enlightened = document.getElementById(id+"ex"); if(
eclipsed.style.display == "block"){
[Code]....
I've set the menu to only allow one menu opened at a time. Thus, it is prudent to add an expand all link. I've searched all through the web and have found nothing.
I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-
menu_status = new Array();
function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);
[Code]....
As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.
i am using this jquery module to get rounded corners.http:[url]....This is my code. but i am not getting any rounded corners though i have correctly included the 2 .js files and have specified the correct div id name.
Code:
<script language="javascript" src="jquery.corner.js"></script>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">[code]....
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].....
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 Relatedit'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]....
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.
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.
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:
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:
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:
how to store the status of a expand and collapse?
View 4 Replies View RelatedI 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 Relatedi presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.
var channelsGroups = new Array();
var channelsChildren = new Array();
channelsGroups[0]= new Array('Mars Public', 'MARS-PUB');
[code].....
I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the entire page.
How do I restrict it to each block and also how do I cllapse those in each block
and change the text to Collapse All. I am stumped here. Any help really really appreciated. Here is my code:
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?
I am using a tiny script that is meant to expand and collapse paragraphs with the click of a "more../less.."link. The page I am writing is working as intended in IE8 so far, however the Javascript functions are not working in FF 3.6 or Chrome. When clicking on the "More../Less" in FF or Chrome, nothing happens.Here is the JS [code]...
View 3 Replies View RelatedI've done a script where a paragraph expands when the expand button is clicked (plus.gif) and contracts when the same button is clicked again. Only problem is I want the icon to change to a minus icon (minus.gif) once it the paragraph has expanded. I'll obviously need to include this in the script, however I'm not sure how to go about it.
Collapsed: [URL]
Expanded: [URL]
Here is the HTML:
<script type="text/javascript" src="expandCollapse.js"></script>
<a href="javascript:void(0" onclick="return toggleMe('para2')" style="color:#ec008c"><p><img src="images/plus.gif" border="0" hspace="6" vspace="0" /></a><strong><font size="3">Beginners 2</font></strong></p>
<div id="para2" style="display:none"><p>*</p>
<p>Students can progress to this level upon completion of the Beginners 1. You will be taught slightly more complex pole tricks and combinations that require all the strength and agility you have gained so far. This is when you will go upside down on the pole, and how to come down gracefully!</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Cost: $220.00</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Length: 1 Hour</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Duration: 8 Weeks<o:p></o:p></p>
<p><o:p>*</o:p></p></div>
And here is the current javascript in 'expandCollapse.js':
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
} return true;
}
<html><head>
<title>Javascript Expand/Collapse Sample</title>
<style type="text/css">
body { font:10pt Verdana; }
a { color:blue; }
#content { background-color:#dddddd; width:200px; margin-top:2px; }
</style></head><body>
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == '')
e.style.display = 'none';
else
e.style.display = '';
}
</script>
<h3>Nested expand/collapse blocks in tree format</h3>
<ul><li>
<a href="#" onclick="toggle('node1')">Item 1</a>
<ul id="node1" style="display:none">
<li>Sub-item 1</li><li>
<a href="#" onclick="toggle('node2')">Sub-item 2</a>
<ul id="node2" style="display:none">
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul></li>
<li>Sub-item 3</li>
</ul></li><li>
<a href="#" onclick="toggle('node3')">Item 2</a>
<ul id="node3" style="display:none">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul></li>
<li>Item 3</li>
</ul></body></html>
How to make when I click on a link to expand to close all other opened links.
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 RelatedI 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