|
JavaScript - Accordion Style List That Shows/hides A Separate Div
Hey everyone. I'm looking for a tutorial or open source script to accomplish the following tasks:
1 - Accordion style vertical list that expands element (Film # and description) when "+more" link is clicked, and closes the previous open film and description. 2 - Activation of "+ more" shows a photo in separate div, and hides the previous photo that was visible in this separate div. I've attached a mockup photo of the idea I need to execute. Seems like a simple idea, but I have not been able to find a similar example/tutorial online. If anyone can point me in the right direction, that would be greatly appreciated. Thanks. Similar TutorialsHello there I'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu. Any help greatly appreciated! Howdy Community, I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action. I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work. I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!! Help!! Thanks, Cesar so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this: Code: <select id="select" onchange="this.value">
<option selected value="function1()">Funtion 1</option>
<option value="function2()">Function 2</option>
<option value="function3()">Function 3</option>
</select>
is it possible? Hi guys, I am using jquery ui to have two connected sortable lists. The first list is available numbers, and the second is selected numbers. Everything with the jquery is working fine. The problem i am having is when i try to get the contents of the selected numbers box, it is empty, even though the sortables are or were dragged to that list. I tried using this... Code: var response = $("#selected_numbers_box").val();
alert( response );
and I also tried this.. Code: var response = $("#selected_numbers_box").html();
alert( response );
both are empty. What i am trying to do is retrieve the values of the new list "Selected numbers Box". Any suggestions? My code was taken directly from the jquery ui tutorial. Thanks in advance. Hello, I'm trying to make a small profile for my website, the website has a number of buttons on the left hand side allowing you to click the buttons and show the data or what they've clicked. For example when a player clicks on their statistics page, the statistics div will show up, and all the other div's will be hidden. If a player clicked on their friends list, the friends list div would be shown and all of the other div's would be hidden. I was able to show and hide the div's separately but I was unsure of how to make all the div's hidden apart from the one which they've clicked on. Thanks if you're able to help me. Link to user profile buttons - http://thepilotslife.com/usernew.php?user=Haydz Hi Guys, I have a pop up that opens for a second then hides behind main window for some reason Code: <img src="../../../print_this_page.gif" title="Click To Print This Page" width="64" height="64" onmousedown="MM_openBrWindow('{ads_print_href}?item_id={item_id}','printnew','scrollbars=yes,width=950,height=800')" />
Any ideas what i can add to the code so it stays in top. Works on firefox. Issue is with IE8 Thanks I am looking for a bit of Javascript that can hide a sentence in my website if the URL contains certain words, most specifically INFO or CERT. Any idea how I can do this? Your help is appreciated. Thank You, Kevin Brown Hi guys, new to the forum and a big noob to JavaScript! I've created a function that would hide and show paragraphs from a drop down list, that paragraph contains a link that will show a div containing a map of google. But when I switch to another State on the drop down list I'd like to have the original first paragraph that showed up to disappear. So far, I can only get the <div> that contains the map to disappear. Can someone send me an example of a function that would hide the paragraph and the <div>? Again, I'm a noob baby talk please. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Untitled Page</title> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divName) { // hide last div if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } function showMap(divName) { //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } //--> </script> <style type="text/css" media="screen"><!-- .hiddenDiv { display: none; } .visibleDiv { display: block; border: 1px grey solid; } #ex1 { position:absolute; width:425px; height:350px; right:40px; top:100px; } #ex2 { position:absolute; width:425px; height:350px; right:40px; top:100px; } --></style> </head> <body bgcolor="#ffffff"> <form id="FormName" action="blah.php" method="get" name="FormName"> <select name="selectName" size="1" onChange="showDiv(this.value);"> <option value="">Choose State</option> <option value="1">Alabama</option> <option value="2">Alaska</option> <option value="3">Arizona</option> <option value="4">Arkansas</option> <option value="5">California</option> <option value="6">Colorado</option> <option value="7">Connecticut</option> <option value="8">Delaware</option> <option value="9">Florida</option> <option value="10">Georgia</option> <option value="11">Hawaii</option> <option value="12">Idaho</option> <option value="13">Indiana</option> <option value="14">Iowa</option> <option value="15">Kansas</option> <option value="16">Kentucky</option> <option value="17">Louisiana</option> <option value="18">Maine</option> <option value="19">Maryland</option> <option value="20">Massachusetts</option> <option value="21">Michigan</option> </select> </form> <p id="1" class="hiddenDiv"><a href="#" onclick="showMap('ex1')">8160 du Creusot<br />St-Leonard, QC</a></p> <p id="2" class="hiddenDiv"><a href="#" onclick="showMap('ex2')">9510 ave. Radisson<br />Brossard, QC</a></p> <p id="3" class="hiddenDiv">This is paragraph 3.</p> <p id="4" class="hiddenDiv"><a href="#l" onclick="showMap('ex1')">Home</a><br /> <a href="us/home.html">Home</a><br /></p> <div id="ex1" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex1 --> <div id="ex2" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+Can ada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+C anada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex2 --> </body> </html> Hello, I'm trying to put some code together to create an image-swapping system, that when you click on the image it'll hide the image and replace it with a given iframe vimeo/youtube code... The swapping part works fine, however when the iframe loads up, it hides all other flash objects in the page, and I can't figure out why. Here's the JS Code: function swapvideo(w,h,url) {
document.getElementById('video_pholder').style.display='none';
document.getElementById('video_code').innerHTML="<iframe src='"+url+"' width='"+w+"' height='"+h+"' frameborder='0' webkitAllowFullScreen allowFullScreen></iframe>";
document.getElementById('video_code').style.display='block';
}
And here's the body Code: <div id="video_pholder"><a href="" onclick="swapvideo('700','394','http://player.vimeo.com/video/30620364?title=0&byline=0&portrait=0&color=FFFFFF&autoplay=1'); return false;">
<img src="image.jpg" width="700" height="393" /></a>
</div>
<div id="video_code" style="display:none;"></div>
You can see it in action he http://blog.davidterranova.com when you click on the "krix" image. It'll hide the top header and also the other flash videos in the posts below. Any ideas why this is happening? Hello to all, I have a little problem with my accordion menu and I CRAVE for your help! I try to make this: when you visit my page I need the menu to be all collapsed. Also the history of clicks (it remembers which menus where left opened) works fine on IE but not on firefox. Here is the js code: function add_menu_event_handlers() { var elems = document.getElementsByTagName('h3'); for (i = 0; i < elems.length; i++) { switch (elems[i].parentNode.className) { /*case 'moduletable': case 'moduletable_menu':*/ case 'left_module_title': case 'left_module_title_menu': { if (elems[i].parentNode.parentNode.parentNode.id == 'xp-left') { xplike_addEvent(elems[i], 'click', function(){menu_header_click(this);}); // menu_header_click(elems[i]); //Load status from cookies and collapse if required var cookie_array = document.cookie.split(';'); for(var j=0; j<cookie_array.length; j++) { var c = cookie_array[j]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf('xplike_menu_status_' + elems[i].firstChild.nodeValue.replace('.', '_').replace(' ', '_')) == 0) { var menu_cookie = c.split('=') if (menu_cookie.length == 2 && menu_cookie[1] == '1') { menu_header_click(elems[i]); } } } } } } } } And it also has this for the history thing. function save_menu_status(menu_title, value, how_many_days) { var date = new Date(); date.setTime(date.getTime()+(how_many_days*24*60*6 0*1000)); var expires = ""; document.cookie = 'xplike_menu_status_' + menu_title.replace('.', '_').replace(' ', '_') + '=' + value + expires + '; path=/'; } It might be easy and stupid, I know, but since I'm a designer - not a developer - all look weird to me! Any thoughts? Hi All, I want an accordion menu and which is as follows 1.it should be a vertical accordion menu 2.every menu should display with image and link 3.if i click on image or link then only menu should display or open to show sub menu otherwise it should not display. Please tell the solution for the above ThanksAhead Venkat I'm creating a Jquery UI accordion and here are my customize options... http://jqueryui.com/demos/accordion/ These options do not include how to make all the accordions start off closed or choosing which one you want open as default when a user sees the page. Right now the user sees the first accordion open. I want to keep them all closed by default or have the option to have the last one open by default. Any guidance would be great... also not sure what code to post here but I guess I'll add the javaScript used to create the accordion with Jquery.... Code: /*
* jQuery UI Accordion 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Accordion
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function( $, undefined ) {
$.widget( "ui.accordion", {
options: {
active: 0,
animated: "slide",
autoHeight: true,
clearStyle: false,
collapsible: false,
event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even",
icons: {
header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s"
},
navigation: false,
navigationFilter: function() {
return this.href.toLowerCase() === location.href.toLowerCase();
}
},
_create: function() {
var self = this,
options = self.options;
self.running = 0;
self.element
.addClass( "ui-accordion ui-widget ui-helper-reset" )
// in lack of child-selectors in CSS
// we need to mark top-LIs in a UL-accordion for some IE-fix
.children( "li" )
.addClass( "ui-accordion-li-fix" );
self.headers = self.element.find( options.header )
.addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" )
.bind( "mouseenter.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-hover" );
})
.bind( "mouseleave.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-hover" );
})
.bind( "focus.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-focus" );
})
.bind( "blur.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-focus" );
});
self.headers.next()
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
if ( options.navigation ) {
var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
if ( current.length ) {
var header = current.closest( ".ui-accordion-header" );
if ( header.length ) {
// anchor within header
self.active = header;
} else {
// anchor within content
self.active = current.closest( ".ui-accordion-content" ).prev();
}
}
}
self.active = self._findActive( self.active || options.active )
.addClass( "ui-state-default ui-state-active" )
.toggleClass( "ui-corner-all" )
.toggleClass( "ui-corner-top" );
self.active.next().addClass( "ui-accordion-content-active" );
self._createIcons();
self.resize();
// ARIA
self.element.attr( "role", "tablist" );
self.headers
.attr( "role", "tab" )
.bind( "keydown.accordion", function( event ) {
return self._keydown( event );
})
.next()
.attr( "role", "tabpanel" );
self.headers
.not( self.active || "" )
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.next()
.hide();
// make sure at least one header is in the tab order
if ( !self.active.length ) {
self.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
self.active
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
});
}
// only need links in tab order for Safari
if ( !$.browser.safari ) {
self.headers.find( "a" ).attr( "tabIndex", -1 );
}
if ( options.event ) {
self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
self._clickHandler.call( self, event, this );
event.preventDefault();
});
}
},
_createIcons: function() {
var options = this.options;
if ( options.icons ) {
$( "<span></span>" )
.addClass( "ui-icon " + options.icons.header )
.prependTo( this.headers );
this.active.children( ".ui-icon" )
.toggleClass(options.icons.header)
.toggleClass(options.icons.headerSelected);
this.element.addClass( "ui-accordion-icons" );
}
},
_destroyIcons: function() {
this.headers.children( ".ui-icon" ).remove();
this.element.removeClass( "ui-accordion-icons" );
},
destroy: function() {
var options = this.options;
this.element
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
.removeAttr( "role" );
this.headers
.unbind( ".accordion" )
.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
.removeAttr( "role" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-selected" )
.removeAttr( "tabIndex" );
this.headers.find( "a" ).removeAttr( "tabIndex" );
this._destroyIcons();
var contents = this.headers.next()
.css( "display", "" )
.removeAttr( "role" )
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
if ( options.autoHeight || options.fillHeight ) {
contents.css( "height", "" );
}
return $.Widget.prototype.destroy.call( this );
},
_setOption: function( key, value ) {
$.Widget.prototype._setOption.apply( this, arguments );
if ( key == "active" ) {
this.activate( value );
}
if ( key == "icons" ) {
this._destroyIcons();
if ( value ) {
this._createIcons();
}
}
// #5332 - opacity doesn't cascade to positioned elements in IE
// so we need to add the disabled class to the headers and panels
if ( key == "disabled" ) {
this.headers.add(this.headers.next())
[ value ? "addClass" : "removeClass" ](
"ui-accordion-disabled ui-state-disabled" );
}
},
_keydown: function( event ) {
if ( this.options.disabled || event.altKey || event.ctrlKey ) {
return;
}
var keyCode = $.ui.keyCode,
length = this.headers.length,
currentIndex = this.headers.index( event.target ),
toFocus = false;
switch ( event.keyCode ) {
case keyCode.RIGHT:
case keyCode.DOWN:
toFocus = this.headers[ ( currentIndex + 1 ) % length ];
break;
case keyCode.LEFT:
case keyCode.UP:
toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
break;
case keyCode.SPACE:
case keyCode.ENTER:
this._clickHandler( { target: event.target }, event.target );
event.preventDefault();
}
if ( toFocus ) {
$( event.target ).attr( "tabIndex", -1 );
$( toFocus ).attr( "tabIndex", 0 );
toFocus.focus();
return false;
}
return true;
},
resize: function() {
var options = this.options,
maxHeight;
if ( options.fillSpace ) {
if ( $.browser.msie ) {
var defOverflow = this.element.parent().css( "overflow" );
this.element.parent().css( "overflow", "hidden");
}
maxHeight = this.element.parent().height();
if ($.browser.msie) {
this.element.parent().css( "overflow", defOverflow );
}
this.headers.each(function() {
maxHeight -= $( this ).outerHeight( true );
});
this.headers.next()
.each(function() {
$( this ).height( Math.max( 0, maxHeight -
$( this ).innerHeight() + $( this ).height() ) );
})
.css( "overflow", "auto" );
} else if ( options.autoHeight ) {
maxHeight = 0;
this.headers.next()
.each(function() {
maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
})
.height( maxHeight );
}
return this;
},
activate: function( index ) {
// TODO this gets called on init, changing the option without an explicit call for that
this.options.active = index;
// call clickHandler with custom event
var active = this._findActive( index )[ 0 ];
this._clickHandler( { target: active }, active );
return this;
},
_findActive: function( selector ) {
return selector
? typeof selector === "number"
? this.headers.filter( ":eq(" + selector + ")" )
: this.headers.not( this.headers.not( selector ) )
: selector === false
? $( [] )
: this.headers.filter( ":eq(0)" );
},
// TODO isn't event.target enough? why the separate target argument?
_clickHandler: function( event, target ) {
var options = this.options;
if ( options.disabled ) {
return;
}
// called only when using activate(false) to close all parts programmatically
if ( !event.target ) {
if ( !options.collapsible ) {
return;
}
this.active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
this.active.next().addClass( "ui-accordion-content-active" );
var toHide = this.active.next(),
data = {
options: options,
newHeader: $( [] ),
oldHeader: options.active,
newContent: $( [] ),
oldContent: toHide
},
toShow = ( this.active = $( [] ) );
this._toggle( toShow, toHide, data );
return;
}
// get the click target
var clicked = $( event.currentTarget || target ),
clickedIsActive = clicked[0] === this.active[0];
// TODO the option is changed, is that correct?
// TODO if it is correct, shouldn't that happen after determining that the click is valid?
options.active = options.collapsible && clickedIsActive ?
false :
this.headers.index( clicked );
// if animations are still active, or the active header is the target, ignore click
if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
return;
}
// find elements to show and hide
var active = this.active,
toShow = clicked.next(),
toHide = this.active.next(),
data = {
options: options,
newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
oldHeader: this.active,
newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
oldContent: toHide
},
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
// when the call to ._toggle() comes after the class changes
// it causes a very odd bug in IE 8 (see #6720)
this.active = clickedIsActive ? $([]) : clicked;
this._toggle( toShow, toHide, data, clickedIsActive, down );
// switch classes
active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
if ( !clickedIsActive ) {
clicked
.removeClass( "ui-state-default ui-corner-all" )
.addClass( "ui-state-active ui-corner-top" )
.children( ".ui-icon" )
.removeClass( options.icons.header )
.addClass( options.icons.headerSelected );
clicked
.next()
.addClass( "ui-accordion-content-active" );
}
return;
},
_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
var self = this,
options = self.options;
self.toShow = toShow;
self.toHide = toHide;
self.data = data;
var complete = function() {
if ( !self ) {
return;
}
return self._completed.apply( self, arguments );
};
// trigger changestart event
self._trigger( "changestart", null, self.data );
// count elements to animate
self.running = toHide.size() === 0 ? toShow.size() : toHide.size();
if ( options.animated ) {
var animOptions = {};
if ( options.collapsible && clickedIsActive ) {
animOptions = {
toShow: $( [] ),
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
} else {
animOptions = {
toShow: toShow,
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
}
if ( !options.proxied ) {
options.proxied = options.animated;
}
if ( !options.proxiedDuration ) {
options.proxiedDuration = options.duration;
}
options.animated = $.isFunction( options.proxied ) ?
options.proxied( animOptions ) :
options.proxied;
options.duration = $.isFunction( options.proxiedDuration ) ?
options.proxiedDuration( animOptions ) :
options.proxiedDuration;
var animations = $.ui.accordion.animations,
duration = options.duration,
easing = options.animated;
if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
easing = "slide";
}
if ( !animations[ easing ] ) {
animations[ easing ] = function( options ) {
this.slide( options, {
easing: easing,
duration: duration || 700
});
};
}
animations[ easing ]( animOptions );
} else {
if ( options.collapsible && clickedIsActive ) {
toShow.toggle();
} else {
toHide.hide();
toShow.show();
}
complete( true );
}
// TODO assert that the blur and focus triggers are really necessary, remove otherwise
toHide.prev()
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.blur();
toShow.prev()
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
})
.focus();
},
_completed: function( cancel ) {
this.running = cancel ? 0 : --this.running;
if ( this.running ) {
return;
}
if ( this.options.clearStyle ) {
this.toShow.add( this.toHide ).css({
height: "",
overflow: ""
});
}
// other classes are removed before the animation; this one needs to stay until completed
this.toHide.removeClass( "ui-accordion-content-active" );
// Work around for rendering bug in IE (#5421)
if ( this.toHide.length ) {
this.toHide.parent()[0].className = this.toHide.parent()[0].className;
}
this._trigger( "change", null, this.data );
}
});
$.extend( $.ui.accordion, {
version: "1.8.16",
animations: {
slide: function( options, additions ) {
options = $.extend({
easing: "swing",
duration: 300
}, options, additions );
if ( !options.toHide.size() ) {
options.toShow.animate({
height: "show",
paddingTop: "show",
paddingBottom: "show"
}, options );
return;
}
if ( !options.toShow.size() ) {
options.toHide.animate({
height: "hide",
paddingTop: "hide",
paddingBottom: "hide"
}, options );
return;
}
var overflow = options.toShow.css( "overflow" ),
percentDone = 0,
showProps = {},
hideProps = {},
fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
originalWidth;
// fix width before calculating height of hidden element
var s = options.toShow;
originalWidth = s[0].style.width;
s.width( parseInt( s.parent().width(), 10 )
- parseInt( s.css( "paddingLeft" ), 10 )
- parseInt( s.css( "paddingRight" ), 10 )
- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );
$.each( fxAttrs, function( i, prop ) {
hideProps[ prop ] = "hide";
var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
showProps[ prop ] = {
value: parts[ 1 ],
unit: parts[ 2 ] || "px"
};
});
options.toShow.css({ height: 0, overflow: "hidden" }).show();
options.toHide
.filter( ":hidden" )
.each( options.complete )
.end()
.filter( ":visible" )
.animate( hideProps, {
step: function( now, settings ) {
// only calculate the percent when animating height
// IE gets very inconsistent results when animating elements
// with small values, which is common for padding
if ( settings.prop == "height" ) {
percentDone = ( settings.end - settings.start === 0 ) ? 0 :
( settings.now - settings.start ) / ( settings.end - settings.start );
}
options.toShow[ 0 ].style[ settings.prop ] =
( percentDone * showProps[ settings.prop ].value )
+ showProps[ settings.prop ].unit;
},
duration: options.duration,
easing: options.easing,
complete: function() {
if ( !options.autoHeight ) {
options.toShow.css( "height", "" );
}
options.toShow.css({
width: originalWidth,
overflow: overflow
});
options.complete();
}
});
},
bounceslide: function( options ) {
this.slide( options, {
easing: options.down ? "easeOutBounce" : "swing",
duration: options.down ? 1000 : 200
});
}
}
});
})( jQuery );
Hi All, So i have been trying over the past few weeks (among other things) to get this menu figured out. I would really appreciate some advice/help/direction with this... Please see attached pic... what i have is three elements: "Home" "Services" "Contact". What i want is on page load they are all 100px wide... now whenever user hovers over an item it expands to be 200px wide while the other two shrink to 50px... remove hover they revert to original... I am not too familiar with javascript as i mainly use C# to do the tasks normally done by javascript (i work on asp.net platform)... i have presented a similar question to this in ajax section (thinkin that what i had was an ajax work around) but upon further reading of sources i think that is not really what i want... I am unsure where to begin and what to do... i know i need to set up a function and i have the math part figured out (i think)... i guess what i am really unclear as to whether this is a modification to the accordion menu frame... the issues i see are that i do not want the menu to have a traditional "content" area that collapses; i want the menu "headers" to expand... i also need them to expand horizontally not vertically... i am not looking for someone to "do this" for me; i am looking for advice and guidance... possibly a link to a tutorial? i have tried this but it does not work right... i can revisit it (possibly type-Oed something) but i havent because it is not really what i am looking for I’m trying to implement a JavaScript that creates an accordion menu. As the script currently stands, your able to tell the first list within the menu to expand when the page loads. You do this by adding .expandfirst into the ul class tag. My question is... Does anyone know how to edit the JavaScript so that I can also tell the menu (on some pages) to expand the second or third list? I only need one list to be expanded at any one time. Here's the script... Code: function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first).show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
Hope someone can help!? Hi All, Does anyone know of any good horizontal accordion scripts that use jquery, like this one: http://www.slidedeck.com/ I would like something very similar to that but unfortunately the free version is as customizable as I need it to be. I've done a Google search but found nothing as of yet... Thanks, Greens85 Hey everyone. If you go he
Code: http://store.inspirationsdancewear.com/?xls_offlinekey=4888254 you will see an "accordion" navigation on the left side. It opens and contracts like it should, HOWEVER I need to add the following functionality. 1. I want to have ONLY 1 "parent" category displaying it's "child" categories at a time. So when I open another "parent" link, I want the previous one to collapse, so only 1 accordion is open at a time (right now you are able to open all of them without the other ones collapsing). 2. When I select a "child" category from the "parent" category, I need the menu to stay open when going to the "child" category page and I also need the relevant "child" category to be "highlighted" so the user knows which page they are on. Please let me know if you can help me with any of this. I would GREATLY appreciate it!! PHP Code: <script type="text/javascript"> //----------------------------NAVIGATION DROPDOWN------------------------------------// sfHover = function() { var sfEls = document.getElementById("left").getElementsByTagName("h2"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); function initMenu() { $('#left div').hide(); $('#left h2').click( function() { $(this).next().slideToggle('normal'); } ); } $(document).ready(function() {initMenu();}); </script> <?php function print_childs($categ){ $childs = $categ->categ_childs; if(!$childs || (count($childs) == 0)){ echo "</a>"; return; } echo "»</a><ul>\n"; foreach($childs as $category){ if(!$category->HasChildOrProduct()) continue; ?> <li><a class="childcats" href="<?= $category->Link; ?>"><?= $category->Name; ?><?php print_childs($category); ?></a></li> <?php } echo "</ul><br/>\n"; } ?> <div id="leftwrapper"> <h2 style="margin-top:-25px; padding-bottom:15px; color:#900; margin-left:15px; font-size:1.2em">Shop Online</h2> <div id="left"> <?php foreach($this->menu_categories as $category): ?> <h2 class="headings"> <?= $category->Name; ?></h2> <div> <a class="childcats" href="<?= $category->Link; ?>"> See all <?= $category->Name; ?> <?php print_childs($category); ?></a> </div> <?php endforeach; ?> <?php if(_xls_get_conf('ENABLE_FAMILIES', 1)): ?> <?php $families = Family::LoadAll();?> <?php foreach($families as $family): ?> <a href="index.php?family=<?= $family->Family ?>"><?= $family->Family ?></a> <?php endforeach; ?> <?php endif; ?> </div> </div> I have this accordion : accordion example I want to separate each item into 3 columns. I tried using table but it doesn't work (it made the text not clickable). Any idea how? Thank you Hello people, I got a problem. This is the code for hiding en showing informatie in an acordion. It looks fine and it works! But it only handles one div! The main thing i want is that when i click on the text "button" the next div, with all the span's within it, has to slide under. Example: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion div").hide();
$(".accordion p").hide();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow").siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
$(".accordion p").show();
$(".accordion .button").show();
});
});
</script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="accordion">
<h3>Title</h3>
<div class="test">
<p>subtext</p>
<div class="button"> <a href="" title="">Button</a> </div>
</div>
<div>
<span style="display:block; height: 20px; width: 220px; margin-top: 10px; margin-left: -5px;"><input type="radio" checked="checked" value="" name="" id="" /><label for="">test</label></span>
<span style="display:block; height: 20px; width: 220px; margin-top: 0px; margin-left: -5px; margin-bottom: 20px;"><input type="radio" value="" name="" id="" /><label for="">test</label></span>
<span style="font-weight:bold;">Vanaf<input type="text" style="width: 20px; height: 15px;" class="" value="1" readonly=""></input>-<input type="text" style="width: 20px; height: 15px;" class="" value="" readonly=""></input>-<input type="text" style="width: 40px; height: 15px;" class="" value="1" readonly=""></input> change to <input type="text" style="width: 20px; height: 10px;" class="" value="" readonly=""></input>%</span>
<span style="display:block; text-align: right; text-decoration:underline; font-weight:bold; color: red;">count</span>
</div>
</div>
</body>
</html>
CSS: Code: body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #004584;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color: #FFFFFF;
}
.accordion h3:hover {
background-color: #00AEE7;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion .test {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion .extra {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax? Also, if you see any ways to make this code better, please post your fixes in this post Code: /*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".
For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>
Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.
If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.
Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/
//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
var c;
for(c in array) {
document.getElementById(array[c]).style.display = "none";
}
click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
click.style.display = "inline";
}}
Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site: Javascript And CSS Tutorial - Accordion Menus | Switch on the Code It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload? Thanks for the help, --Anamaniac |
|||||||