accordion selbstbau

guuls

hi,
vielleicht kann mir jemand weiter helfen und verraten wie ich die scripts richtig zusammen baue
danke.

Code

$('h1 > a').bind('click', function(event){
    event.preventDefault();




})








    var accordion_id = "currentTarget.html";
    var Suche = accordion_id.indexOf(".html");
    var Teil = Suche.substring(0, 5);
    alert(Teil);


box=$('#extendbox_'+shorturl)


if{box.hasClass("closed")){
        slideDown("fast");
        removeClass('closed');
}else{
    slideUp("fast");
    addClass('closed');
}

Alles anzeigen

synaptic

gib ma den entsprechenden html-code dazu und erklär mal schritt für schritt, was dein script macht.
hab die vermutung so isses sinnvoller, als wenn ich dir ne fertige lösung präsentier

guuls

ja wahrscheinlich
das scrippt soll von dem anker in h1 bei klick das div mit der jeweiligen id öffnen bzw schließen. dazu muss aus dem link alles weggekürz werden außer dem entsprechendem ziel also in demfall prdodukt. dann wird produkt zusammen gesetzt zu einer id und soll dann geöffnet werden.

HTML

<h1><a href="produkte.html">Produkte<span> im Shop</span></a></h1>
        <div class="box">
            <div class="exhibit">
                <h2>Überschrift</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dap</p>
                <img src="files/content_01.jpg">
            </div>
            <div class="exhibitor">
                <img src="files/designer_01.jpg">
                <h2>Lorem</h2>
                <p>Lorem Ipsum</p>
            </div>
        </div>
        <div class="box closed" id="extendbox_produkte">
            <div class="exhibit">
                <h2>Überschrift</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p>
                <img src="files/content_02.jpg">
            </div>
            <div class="exhibitor">
                <img src="files/designer_02.jpg">
                <h2>Lorem</h2>
                <p>Lorem Ipsum</p>
            </div>
        </div>

Alles anzeigen

synaptic

also als erstes arbeite mit anständigen IDs und klassen (am besten für css und js eigene und die js-actions mit js_ beginnen, das mach den code übersichtlicher für debugs)
dann würde ich wenn ich was mit links machen möchte und werte "sichern" oder initial verfügbar haben will das REL-attribut nutzen dafür.

also schreib die ID der zu öffnenden box is rel-attr, da ersparste dir so substring-dinger.

zu deinem script:

var accordion_id = "currentTarget.html";

hier wird ja nichts dynamisch erkannt...

klick auf a-tag=>function die rel ausliest, box-id aus rel baut, prüft ob element closed als class hat
ja dann slideDown und closed wegnehmen, nein dann slideUP und close setzen
return false am ende und gut is.
du musst da kein event und prevent default haben wenn du false zurückgibst

Tags