gratis jquery faq systeem

Hey jongens,

Ik ben jquery aan het leren en was vandaag met de toggle() en hide() functies.

Hier het resultaat!

style.css

@charset "utf-8";
/* CSS Document */

body{
    font-family: arial;
}

.hide {
    display: none;
    text-align:center;
    color:#232323;
    display: none;
    background-color:#cacaca;
    border: 1px dotted #676767;
    width: 258px;
    margin-bottom:10px;
    font-size: 14px;
    font-weight: bold;
    padding: 20px;
}

#wrapper {
    width:300px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}
h2 {
    padding:10px;
    font-size:20px;
    color:#232323;
    background-color:#ebebeb;
    text-align:center;
    margin-bottom:5px;
    border: 1px dotted #676767;
    font-size: 18px;
}
h2:hover {
    padding:10px;
    font-size:20px;
    color:#232323;
    background-color:#ebebeb;
    text-align:center;
    margin-bottom:5px;
    border: 1px dotted #676767;
    font-size: 18px;
    text-decoration: underline;
}

#answer {
    text-align:center;
    color:#232323;
    display: none;
    background-color:#cacaca;
    border: 1px dotted #676767;
    width: 258px;
    margin-bottom:10px;
    font-size: 14px;
    font-weight: bold;
    padding: 20px;    
}

De html

<body>
<br />
<div id="wrapper">
    <div id="answer"></div><br />
    
    <h2>Hoe oud is Rogier?</a></h2>
    <div class="hide">
        Rogier is 15
    </div>
    
    <h2>Wat eten we vanavond?</a></h2>
    <div class="hide">
        Vanavond eten we patat.
    </div>
    
    <h2>Waarom is xboxen leuk?</a></h2>
    <div class="hide">
        Omdat het ownt!
    </div>
    
    <h2>Waarom is dit jquery?</a></h2>
    <div class="hide">
        Omdat het ziek vet is!
    </div>
</div>
</body>

De jquery code van V1: (http://zoekleven.nl/jquery/faq1.html)

<script language="javascript">
/*
Faq Systeem V1 door Rogier Fischer
26 februarie 2012
*/
$(document).ready(function(){

    $("h2").click(function(){
        $(this).next(".hide").slideToggle("slow");
    });


/*    
    Als je de box op een andere manier wil laten verdwijnen dan de standaard manier moet je dit stukje plaatsen op de plaats van de code hieronder.
    
    $(".hide").click(function(){ 
        $(this).hide("slow"); 
    });    
    
*/            
    $(".hide").click(function(){
        $(this).slideToggle("slow"); 
    });    

});

</script>

De code van V2: (http://zoekleven.nl/jquery/faq2.html)

<script language="javascript">
/*
Faq Systeem V2 door Rogier Fischer
26 februarie 2012
*/
$(document).ready(function(){

    $("h2").click(function(){ 
        if(! $(#answer).is(":visible")) {
            $("#answer").slideToggle("slow");
        }

        var text = $(this).next().html();
        
        $("#answer").html(text); 

    });
/*
    Als je de box op een andere manier wil laten verdwijnen dan de standaard manier moet je dit stukje plaatsen op de plaats van de code hieronder.

    $("h2").dblclick(function(){
        $("#answer").hide("slow"); 
    });    
        
*/
    $("h2").dblclick(function(){
        $("#answer").show().slideToggle("slow"); 
    });    
/*
Als je de answer div op een andere manier wil laten verdwijnen moet je onderstaande code vervangen door:

    $("#answer").click(function() { 
        $("#answer").hide("slow"); 
    });    

Als je de answer div wil laten verdwijnen als je muis erop staat moet je onderstaande code vervangen door:

    $("#answer").hover(function() { 
        $("#answer").hide("slow"); 
    });    

*/    
    $("#answer").click(function() { 
        $("#answer").show().slideToggle("slow"); 
    });        
});

</script>

Als jullie nog ideeën hebben om te maken in jquery mag je dat hier zeggen of in PM.

Rogier

Hoe oud is rogier?
Rogier is gewoon de beste

Waarom overal? Je opent nergens een anchor tag.

Ook geef je de selector een te algemene tag mee (h2) ik zou #wrapper h2 kiezen.

Die is een foutje, eerst gaf ik het aan als een link maar later heb ik dat verwijdert.

En dan naam van de tag moet de gebruiker natuurlijk zelf kiezen... Zeker omdat de wrapper eigenlijk een container is en als ik conainer h2 zou doen maakt dat natuurlijk niets uit.

Gebruik cursor code, bijvoorbeeld van:

<div class="hide">
        Omdat het ownt!
    </div>

Naar:

<div style="cursor:pointer;cursor:hand" class="hide">
        Omdat het ownt!
    </div>

Dan krijg je een handje in plaats van tekst selecteren cursor.

(Volgens mij)

ah nice ik wist niet dta dat kon!

Dat ken ik nog van kindertent
Toen kon je banaan cursors doen ofzo.

Ik vind die 1e mooier

Mee eens, de tweede was ook puur om mee te oefenen

Doe als je een 2de opent dat de eerste meteen weer sluit.

idd,
maak dat je maar 1tje open kan krijgen, dat de ander weer dicht gaat als je op een knopje klikt

@Wouterp: Dat lijkt me juist niet handig. Mischien willen mensen ze wel open houden?

Maar ik denk dat het dan te groot wordt allemaal

/*
Faq Systeem V1 door Rogier Fischer
26 [b]februarie[/b] 2012
*/

Het is geloof ik februari, en niet februarie

Rogier schreef:

@Wouterp: Dat lijkt me juist niet handig. Mischien willen mensen ze wel open houden?

Maak anders een v3