Hi,

Ik ben bezig met een uitklap met jQuery, maar nu klapt uit wel uit, maar willen 2 dingen niet.

Probleem 1:

De uitklap wil wel, maar nu wil ik een afbeelding onder het content krijgen, zonder het afgesloten is, maar dit gaat niet.

Probleem 2:

Ik wil in de kop een afbeelding met een pijl naar beneden als het dicht zit, en omhoog als het open staat, ook dit wil niet.

De HTML:

PHP Code:

<ul id="av">
    <li>
        <h3>Artikel 01.</h3>
        <span class="pijl"></span>
        <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 class="av-bot"></div>
</li>
    <li>
        <h3>Artikel 02.</h3>
        <span class="pijl"></span>
        <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>
    </li>
    <li>
        <h3>Artikel 03.</h3>
        <span><img src="pijl-omlaag.png" style="width:30px; height:30px;"></span>
        <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>    
    </li>
</ul> 


De CSS:

PHP Code:

<style type="text/css">

#av{
    list-style:none;    
    font: normal 12px verdana; color:#000;
    font-size:11px;
    margin:0;
    padding:0;
    width:300px;
}

    #av li {
        margin:10px;
        background: url('av-content.png');
        width:655px;
        overflow:hidden;
        position:relative;
        cursor:pointer;
    }
    
    #av h3 {
        margin:0;
        font: bold 16px verdana; color:#fff;
        line-height:45px;
        padding-left:20px;
        background: url('av-top.png');
        width:655px;
        height:45px;
    }

    #av span, .pijl{
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: 10px;
    top: 9px;
    background: url('pijl-omlaag.png') no-repeat;}
    
    #av span, .pijl, .closed{
    background: url('pijl-omhoog.png') no-repeat;
    }
    
    #av p {
        margin:20px 20px 20px 20px;
        display:none;
    }    
    
    #av-bot{
    background: url('av-bot.png') bottom;
    width: 655px;
    height;14px;

    }

</style> 


De jQuery

PHP Code:

<script type="text/javascript">
    $(document).ready(function () {
    
    $('#av li').click(function () {

        var text = $(this).children('#av p');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('#av span, .pijl, .closed').html('-');        
        } else {
            text.slideUp('200');
            $(this).children('#av span, .pijl').html('+');    
        }
        
    });

});
</script> 


Kan iemand mij hiermee helpen?

Alvast bedankt,

Groet,


Patrick

Zou het niet makkelijker gaan met toggle?

#av span, .pijl, .closed{
waarom niet iets in de aard van
#av span{
width: 30px;
height: 30px;
display: block;
position: absolute;
right: 10px;
top: 9px;
}

.closed{
background: url('pijl-omhoog.png') no-repeat;
}

.open{
background: url('pijl-omlaag.png') no-repeat;
}

Dat geeft geen verandering

if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('#av span, .pijl, .closed').html('-'); ***
}

*** in je html staat er nergens een class .closed dus kan je jQuery je afbeelding niet veranderen. Tenzij je een addClass toevoegt. Denk ik toch.
En anders kun je ook als je klikt om av li dat je onclick='this.source="pijlomlaag.png"' gebruikt.

Hoe moet ik dit doen dan? Want zo'n ster met jQuery ben ik nou ook weer niet.

Ik wil er anders keer naar kijken voor u, ik kan niets beloven maar ik denk da'k u kan helpen. gregorycourtens @hotmail.com