Content Toggle

[sashx]

Hallo Zusammen

Ich habe folgendes Problem. Bei dem gerade anstehenden Website Projekt, wollte ich beim Servieangebot eine kleine Vorschau erstellen und bei dieser dann mit dem "mehr lesen" Button die Details per Toggle öffnen lassen (Siehe Bild).



Ich wollte das so lösen:

html

<div class="previewbg">
	<div class="previewbg_TE">
	  <div class="angebotdetail"><a href="#"><img src="http://www.thierryboillat.ch/wp/wp-content/themes/thierryboillat/images/content/ml.png" alt="" /></a></div>
		<div class="previewr">
			<div class="previewtext">
				<h5>Zauberhaft</h5>
				<p>Planen Sie einen speziellen Moment für Ihre Liebsten, Freunde oder Bekannte?</p>
				<p>Wollen Sie Ihnen ein aussergewöhnliches Geschenk machen?</p>
				<p>"Thierry Exklusive" heisst die Lösung!</p>
				</p>
			</div>
		</div>
	</div>
	<div class="angebotdetail_container">		
		<div class="block">
			<div class="page_t">	
			</div>
			<div class="contentbg_m">		
					<h3>Content Header</h3>
					<!--Content-->
			</div>
			<div class="page_b">
			</div>
		</div> 
	</div>
</div>

JQuery

$(document).ready(function(){

	$(".angebotdetail_container").hide(); 
	$(".angebotdetail").click(function(){
		$(this).toggleClass("opened").next().slideToggle("slow");
	});

});

CSS

.angebotdetail {
	padding:20px 12px 0 18px; text-transform:uppercase;
	margin: 0 0 0 20px;
	width:96px; height:20px;
	float: left;
	clear:both;
}
.angebotdetail a {
	text-decoration: none;
	display: block;
}
.angebotdetail a:hover { text-transform:uppercase;}
.active {text-transform:uppercase;} 
.angebotdetail_container {
	margin: 0 0 0 20px;
	padding: 0 0 0 0;
	overflow: hidden;
	width: 680px;
	clear: both;
	
}
.angebotdetail_container .block {
	padding:0; 
}

Nun ist es so, dass die Aktion nur innerhalb des previewbg_TE divs passiert wo ich das "mehr lesen" eingefügt habe .
Ist das so überhaupt realisierbar? Ich stehe jetzt echt auf dem Schlauch.
Wie könnte ich das in etwa lösen.. oder gäbe es noch eine andere Möglichkeit, das so hin zu bekommen.

Liebe Grüsse aus dem schönen Bern
Sash

[pidd]

Entschuldigung aber ich verstehe nicht ganz was du machen möchtest. Was soll denn beim dritten Bild passieren?
Also Bild 1 und 2 sind Beispiele für solche Service Angebote? Und das dritte stellt dar was passiert nachdem man auf mehr lesen geklickt hat?

EDIT:
Ah! Kann es sein dass du den leeren Container (drittes Bild) als detailviewer nutzen möchtest? Und je nach dem auf welches "mehr lesen" man klickt dessen details in genau diesem leeren Container dargestellt wird?

[sashx]

Hi
Ja genau, dass war die Idee. Ich habe aber das Problem mittlerweilen selbst gelöst.
Ich habe einfach den falschen div Container angesprochen.

Die Lösung dazu:

    $(".detail_container7").hide(); 
    
    $("h6.detail7").click(function(){
    	$(".detail_container4").hide("fast");
    	$(".detail_container5").hide("fast"); 
    	$(".detail_container6").hide("fast");
        //Die Lösung nach .next den zu öffneden div einfügen
    	$(this).toggleClass("opened").next(".detail_container7").slideToggle("slow");
    });
});

Das Ergebnis findet Ihr unter http://www.thierryboillat.ch

LG aus Bern,
Sash

P.s. Gelöst

[pidd]

sehr gut. Im Prinzip ein Akkordeon