JQuery öffnen/schließen von verschachtelten Boxen ggf. Accordion

kharn

Erfahrenes Mitglied
Hallo zusammen,

leider bin ich blutiger JQuerry / Javascript Anfänger und habe versucht mich über versch. Tutorials z.B. http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ mit JQuery vertraut zu machen, leider bisher mit wenig Erfolg :/

Ich würde gerne eine Art verschachteltes Accordion bauen. Im Grunde soll es über eine Tiefe von zwei Ebenen verfügen, also 5 Kategorien, die jeweils 5 und mehr Artikel enthalten. Später soll das ganze so aussehen:

--Kategorie-------------
Thema Thema
Thema Thema
----------------------------

--Kategorie-------------
----------------------------

--Kategorie-------------
----------------------------

Wenn man auf Thema clickt soll sich der Inhalt ebenfalls aufschieben. Wenn man dann auf eine andere Kategorie klickt soll die geöffnete Kategorie geschlossen und die angeklickte geöffnet werden.

Meine bisherigen Versuche seht ihr hier: http://www.pixelasm.com/a/test/

Leider habe ich gleich meherer Probleme:
1. Wenn man Kategorie 1 öffnet ist ewig viel Platz zur nächsten Kategorie, wie kann man die Höhe der Kategorien an die geöffneten Projekte anpassen?
2. Die Projekt DIVs laufen ineinander, wie kann man die voneinander trennen?
3. Für die Projekt Kontainer habe ich drei Grafiken angelegt um daraus Boxen mit abgerundeten Ecken zu machen und dachte mir wenn ich die der Headline dem Paragraphen sowie einem weitern DIV zum Abschluss per CSS zuweise das das ganze funktionieren würden. Habt ihr eine Idee wie ich das am besten umsetze?


4. Später würde ich die Inhalte der Projekte gerne erst später nachladen und zwar dann wenn die Kategorie geöffnet wird. Nunja im Moment ist das noch Zukunftsmusik :/ aber ich dachte mal ich frag das auch direkt :P


Grüße und Dank schon mal
Ralf
 
1.Tausche die beiden Anweisungen, damit zuerst das innere Accordion erstellt wird. Wenn du danach das äußere erstellst, passt es sich an die bereits geänderte Höhe des inneren an.
Javascript:
$("#project").accordion({ active: 'none'});
$("#category").accordion({ active: 'none', clearStyle: true});

2. Siehe 1. (clearStyle: true). Was dieser Wert bewirkt, kannst du in der Dokumentation nachlesen.

3. Das div bekommt als Hintergrundbild die unteren beiden Ecken mit background-position:left bottom; und entsprechend background-color:#DEDEDE; und einem border. Wenn du jetzt bei deinem h3-Elementen noch background-repeat:no-repeat; benutzt, sieht es schon fast fertig aus.

4.Du musst das "change"-Event benutzen, um auf die Änderung des Accordions zu warten. Dort kannst du dann z.B. mit $.get() den Inhalt laden.
 
Hey CPOLY: Danke das hat schonmal gut geklappt, hätte nicht gedacht das die Reihenfolge der Scripte eine Ausrikung hat O.o.



Leider komme ich jetzt an anderer Stelle nicht weiter:
Ich würde den Link zum öffnen und schließen der Projekt Container lieber unter das entsprechende Projekt legen. Leider scheint das standard Accordion so ausgelegt zu sein das nur das nächste Paragraph Element das auf das H3 folgt animiert wird, weshalb das bei mir nicht mehr funktioniert, dabei soll der Projekt Kontainer etwa so aufgebaut sein
-------------------------
Headline
Bild
Text
--- versteckter Text
--- versteckter Text
--- versteckter Text
Link zum öffnen
--------------------------

1) Hat jemand eine Idee wie ich den Link vom Standard Accordion sagen kann das er nur eine bestimmte Klasse verändern soll?

2) Vielleicht ist ein Accordion auch zu viel des Guten, hab auch mal mit dem slideToggle was versucht, hier habe ich aber das Problem das dann alle Klassen geöffnet und geschlossen werden. Hier müsste ich also auch irgendwie sagen können das alle entsprechenden Klassen geschlossen werden und die aktive geöffnet wird. Meinen Versuch dazu habe ich mal auskommentier drinn stehen lassen.

Das Testfile findet ihr hier


HTML:
 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
   <link rel="shortcut icon" href="favico.ico">
   <link rel="shortcut icon" href="favico.gif" type="image/gif" >
   
   <link rel="stylesheet" type="text/css" href="format_screen.css">
   
	<script type="text/javascript" src="iepngfix_tilebg.js"></script>  <!-- IE PNG workaround -->
   <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
   <script src="jquery-ui.min.js" type="text/javascript"></script>
   <script type="text/javascript" language="javascript">
     $(document).ready(function(){

	$(".project").accordion({ active: 'none'})
	$("#category").accordion({ active: 'none', clearStyle: true});

/*
	$(".project_btn").click(function(){
									 
	  $(".info").slideToggle("slow");
	  $(this).toggleClass("active");

		$(".info").slideUp("normal");	
		$(this).next().slideDown("normal");
		$(".info").hide();	

	});
*/
     });
     
   </script>



 </head>


 <body>

<div id="head"></div>

<div id="content_bg">
<div id="content">

   
   <div id="category">

   <h3><a href="#">Category 1</a></h3>
	<div>
     <div class="project">
		<div class="left">
	        <h2>Project 1</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#" class="project_btn">more info</a></h3></div>
		</div>
		<div class="right">
	        <h2>Project 2</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#">more info</a></h3></div>
		</div>
		<div class="clear">
	        <h2>Project 3</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#">more info</a></h3></div>
		</div>
	</div>
    </div>
	
	<h3><a href="#">Category 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>

	<h3><a href="#">Category 3</a></h3>
	<div>
    <div class="project">
		<div class="left">
	        <h2>Project 1</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#" class="project_btn">more info</a></h3></div>
		</div>
		<div class="right">
	        <h2>Project 2</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#">more info</a></h3></div>
		</div>
		<div class="clear">
	        <h2>Project 3</h2>
			<div class="project_container">
            <p class="pic"><img src="cont/test.jpg"></p>
            <p class="info">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot"><h3><a href="#">more info</a></h3></div>
		</div>
	</div>
	</div>
	
	
	<h3><a href="#">Category 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
	</div>
    </div>

</div>
</div>

<div id="foot">

</div>

 </body>
 </html>



PHP:
/***********************************/
/* general elements
/***********************************/

* {
	margin: 0 ;
	padding: 0 ;
	outline: none;
}

body {	
	background-color: #e0e0e0 ;
	height: 100%;
	border: none;
	font-family: Verdana,sans-serif ;
	font-size: 9pt ;
	color: #BABABA ;
}

img {
	border: 0 ;	
}


/* IE PNG hack */
img, div { behavior: url(iepngfix.htc) }



/***********************************/
/* elements
/***********************************/
#head{
		background-image:url(gui/head_bg.png);
		background-repeat:repeat-x;
		height: 73px;
}

#content_bg{
		background-color: #FFFFFF;
}

#content{
	width: 887px ;
	  margin-left: auto ;
  margin-right: auto ;
}

#category {

  padding: 12px;
}

.project {
	width: 220px;
}

.project p{
	width: 220px;
	padding: 10px;
}

.project_container {
	background-image:url(gui/box_mid.png);
	background-repeat:repeat-y;
}

.project h2{
	padding: 5px 0 0 10px;
	background-image:url(gui/box_top.png);
	background-repeat: no-repeat;
	text-shadow: #FFFFFF 0em 0.1em;
	color: #000000;
}

.project h3{
	text-align: right;
}

.project_bot {
	background-image:url(gui/box_bot.png);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	padding: 0 10px 10px 0;
	
}

// project DIV position -------------------------------
.left { 
	float:left;
	width:220px;
}
.right {
	width:220px;
}
.clear {
	clear:left;
}


#foot{
		background-image: url(gui/foot_bg.png);
		background-repeat: repeat-x;
		background-color: #e0e0e0;
		min-height:500px;
		
}
 

Neue Beiträge

Zurück