• Forum
• Allgemein
• HTML, PHP, SQL,...
• Klapptext in Selfpage

ilch Forum » Allgemein » HTML, PHP, SQL,... » Klapptext in Selfpage

1. Mi. 20.05.2015 20:38 Uhr #1

   

   Oegli Mitglied

   Registriert seit

   11.04.2006

   Beiträge

   179

   Beitragswertungen

   

   Hi,
   
   ich möchte gerne Klapptexte auf eine Selfpage packen und zwar Jahreszahlen.
   
   Wenn man dann auf ein Jahr klickt, soll eine Liste der jeweiligen Treffen in diesem Jahr erscheinen und per klick auf die Einträge geht es zu den Fotos der Treffen.
   
   Wie binde ich einen solchen Klapptext in eine Selfpage ein?
   Der BBCode funktioniert ja leider nicht, der diese Funktion beeinhaltet...
   
   
   Danke für die Hilfe!
   
   
   verwendete ilch Version: 1.1 P
   0 Mitglieder finden den Beitrag gut.

   • zitieren
2. Mo. 25.05.2015 20:47 Uhr #2

   

   Oegli Mitglied

   Registriert seit

   11.04.2006

   Beiträge

   179

   Beitragswertungen

   

   Keiner eine Idee...?
   0 Mitglieder finden den Beitrag gut.

   • zitieren
3. Mo. 25.05.2015 21:27 Uhr #3

   

   Lord|Schirmer Administrator

   Registriert seit

   21.03.2007

   Beiträge

   7.629

   Beitragswertungen

   

   Und im Forum willst Du es nicht machen ... zu diesen Thema kann ja auch verlinkt werden.
   
   Es gäbe schon eine Möglichkeit ein autarkes System mit BBCode Eingabe einzupflegen ... bedarf aber etwas mehr Aufwand.

   rules :: doku :: faq :: linkus
   0 Mitglieder finden den Beitrag gut.

   • zitieren
4. Mo. 25.05.2015 22:09 Uhr #4

   

   Nex4T Moderator

   Registriert seit

   28.02.2007

   Beiträge

   3.414

   Beitragswertungen

   

   Hier
   
   Das in deine selfpage
   

   <ul id="toggle-view">
   	<li>
   		<h3>Title 1</h3>
   		<span>+</span>
   		<div class="panel">
   			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
   		</div>
   	</li>
   	<li>
   		<h3>Title 2</h3>
   		<span>+</span>
   		<div class="panel">
   			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
   		</div>
   	</li>
   	<li>
   		<h3>Title 3</h3>
   		<span>+</span>
   		<div class="panel">
   			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
   		</div>
   	</li>
   </ul>

   
   
   styles einbinden
   
   

   #toggle-view {
   	list-style:none;	
   	font-family:arial;
   	font-size:11px;
   	margin:0;
   	padding:0;
   	width:300px;
   }
   
   	#toggle-view li {
   		margin:10px;
   		border-bottom:1px solid #ccc;
   		position:relative;
   		cursor:pointer;
   	}
   	
   	#toggle-view h3 {
   		margin:0;
   		font-size:14px;
   	}
   
   	#toggle-view span {
   		position:absolute;
   		right:5px; top:0;
   		color:#ccc;
   		font-size:13px;
   	}
   	
   	#toggle-view .panel {
   		margin:5px 0;
   		display:none;
   	}

   
   
   javascript einbinden
   
   

   $(document).ready(function () {
   	
   	$('#toggle-view li').click(function () {
   
   		var text = $(this).children('div.panel');
   
   		if (text.is(':hidden')) {
   			text.slideDown('200');
   			$(this).children('span').html('-');		
   		} else {
   			text.slideUp('200');
   			$(this).children('span').html('+');		
   		}
   		
   	});
   
   });

   
   
   somit hättest du dein "klapptext", was genau du ausgeben möchtest ist dir ja dann selbst überlassen
   
   
   Zuletzt modifiziert von Nex4T am 25.05.2015 - 22:17:21

   while(!asleep()) sheep++;
   www.movely.biz
   www.webplant.eu
   0 Mitglieder finden den Beitrag gut.

   • zitieren
5. Mi. 27.05.2015 18:41 Uhr #5

   

   Oegli Mitglied

   Registriert seit

   11.04.2006

   Beiträge

   179

   Beitragswertungen

   

   Genial, funktioniert perfekt!
   
   
   Besten Dank!
   0 Mitglieder finden den Beitrag gut.

   • zitieren