You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 29-04-2013 12:16:16

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Accordion probs

Hi,

in version 3 the accordions worked fine for me, but in v4, I can't get it right.

I'm using

<div class="metro-accordion no-memory hide-others">

to hide the non-active items.

Is this wrong? because it does not have any effect tongue

regards
- Pie

Offline

#2 29-04-2013 18:54:03

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Accordion probs

It works for me hmm

<div class="metro-accordion no-memory hide-others">
<h3>First title of the accordion</h3>
<div>To prevent that the window will scroll (if it can scroll) to the clicked header, add the class "no-scroll" to that wrapping div (so it has "metro-accordion no-scroll" as class. 
<p>To prevent that the opened div is stored in the url (so it isn't opened when the page is refreshed or linked to), add "no-memory" in the same way.
<p>If you want that only one accordion can be opened at once. Add the class "hide-others", in the same way.
</div>
<h3>Second title</h3>
<div>
Etiam metus sem, tristique vel dignissim sed, imperdiet et mauris. Duis id urna a magna tempus consequat. Pellentesque imperdiet blandit congue. Quisque tempor felis eget magna accumsan posuere sollicitudin diam scelerisque. Curabitur ut sapien vitae eros imperdiet luctus a sit amet nulla. Praesent fermentum, neque id laoreet interdum, nunc nulla eleifend mi, a semper risus ante quis libero. Integer leo nulla, consequat vitae rhoncus nec, feugiat vel ligula. Integer dolor massa, pretium a dapibus nec, tincidunt eu elit.
</div>
<h3>Title three</h3>
<div>
Morbi at libero posuere sapien egestas iaculis quis quis tortor. Nunc at libero ac felis consequat eleifend. Vivamus sit amet vulputate turpis. Fusce eget velit ac mauris posuere adipiscing. Curabitur nunc nisi, eleifend sit amet feugiat nec, tincidunt vitae nibh. Etiam in nisi lorem, a accumsan dolor. Curabitur ipsum risus, convallis non varius eleifend, rutrum in neque. Morbi vel lacus porta turpis hendrerit faucibus. Proin vestibulum velit vitae magna mattis a luctus nibh accumsan. Suspendisse in purus nulla, sit amet faucibus neque. Nam tortor lacus, laoreet eu facilisis quis, pharetra sit amet tellus. Curabitur ullamcorper sollicitudin est, id imperdiet quam viverra at. Phasellus dapibus fringilla accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultricies tincidunt laoreet.
</div>
</div>

plugins/accordion/plugin.js content:

$.plugin($beforeSubPageShow,{
	accordion:function(){
		$("div.metro-accordion").children("h3").each(function(){
			$(this).addClass("accordionTitle").next().addClass("accordionContent").hide();
			$(this).prepend("<img class='accordionArrow' src='themes/"+theme+"/img/primary/arrowRight.png'/>");
			
		});
		if(!$("div.metro-accordion").hasClass("no-memory")){
			for(var i = 1;i<$hashed.parts.length;i++){
				if($hashed.parts[i].substr(0,4) == "acc="){
					var t = $hashed.parts[i].substr(4);
					$("div.metro-accordion").children("h3").each(function(){
						if($(this).text().toLowerCase() == t){
							$(this).next().slideDown(500);
							if($.browser.name=="msie" && $.browser.version<9){
								$(this).children("img").attr("src","themes/"+theme+"/img/primary/arrowBottom.png")
							}else if($.layout.name == "webkit"){	
								r=89;
								$accordion.turnImageDown($(this).children("img"));
							}else{
								$(this).children("img").removeClass('right').addClass("down");
							}
							if(!$("div.metro-accordion").hasClass("no-scrollto")){
								setTimeout(function(el){$("html,body").animate({scrollTop: $(el).offset().top},500)},500,this);
							}
							return false;
						}
					});
					break;
				}
			}
			setTimeout("$hashed.doRefresh = true",500);
		}
		$("#content").children("div.metro-accordion").on("click","h3",function(){
			var $c = $(this).next(),
				$d = $(this).parent();
			if($c.css("display") == "none"){
				if($d.hasClass("hide-others")){
					$d.children("div").stop().slideUp(500);
					$d.children("h3").children("img").attr("src","themes/"+theme+"/img/primary/arrowRight.png").removeClass('down').addClass("right");
					if($.layout.name == "webkit"){
						r=0;
						$accordion.turnImageRight($d.children("h3").children("img"));
					}
				}
				$c.stop().slideDown(500);
				if($.browser.name=="msie" && $.browser.version<9){
					$(this).children("img").attr("src","themes/"+theme+"/img/primary/arrowBottom.png")
				}else if($.layout.name == "webkit"){	
					r=0;
					$accordion.turnImageDown($(this).children("img"));
				}else{
					$(this).children("img").removeClass('right').addClass("down");
				}
				if(!$d.hasClass("no-scrollto")){
					$("html,body").animate({scrollTop: $(this).offset().top},500);
				}
				if(!$d.hasClass("no-memory")){
					$hashed.doRefresh = false;
					for(var i = 1;i<$hashed.parts.length;i++){
						if($hashed.parts[i].substr(0,4) == "acc="){
							 $hashed.parts.splice(i,1);
							 window.location.hash = $hashed.parts.join("&");
							 break;
						}
					}
					window.location.hash += "&acc="+$(this).text().toLowerCase(); 
					setTimeout("$hashed.doRefresh = true",500);
				}
			}else{
				$c.stop().slideUp(500);
				if($.browser.name=="msie" && $.browser.version<9){
					$(this).children("img").attr("src","themes/"+theme+"/img/primary/arrowRight.png")
				}else if($.layout.name == "webkit"){
					r=90;
					$accordion.turnImageRight($(this).children("img"));
				}else{
					$(this).children("img").removeClass('down').addClass("right");					
				}
				if(!$d.hasClass("no-memory")){
					$hashed.doRefresh = false;
					for(var i = 1;i<$hashed.parts.length;i++){
						if($hashed.parts[i].substr(0,4) == "acc="){
							 $hashed.parts.splice(i,1);
							 window.location.hash = $hashed.parts.join("&");
							 break;
						}
					}
					setTimeout("$hashed.doRefresh = true",500);
				}
			}
		});
	}
});
$accordion={
	turnImageDown:function(img){
	    r+=9;
		$accordion.turn(img,r);
	    if(r<90){setTimeout(function(){$accordion.turnImageDown(img)},40)}else{setTimeout(function(){$accordion.turn(img,90)},40)}
	},
	turnImageRight: function(img){
	    r-=9;
	    $accordion.turn(img,r);
	    if(r>0){setTimeout(function(){$accordion.turnImageRight(img)},40)}else{setTimeout(function(){$accordion.turn(img,0)},40)}
	},
	turn:function(img,r){
	    img.css("transform","rotate("+r+"deg)").css("-webkit-transform","rotate("+r+"deg)")
	}
}

Offline

#3 29-04-2013 22:02:42

Pie
Contributors
From: Germany
Registered: 17-03-2013
Posts: 366
Website

Re: Accordion probs

Hi Thomas,

thanks, I misplaced the <div> tags :-)

- Pie

Offline

Board footer

Powered by FluxBB