JQuery show/hide or Toggle with an image + / -

Question

Hi alle i have the fallowing code for the show and hide. But in my browsers theres nu plus or minus image.

$(window).ready(function() {
      $('header').click(function() {
        var text = $(this).children(' #bericht');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $('img', this).attr('src', 'images/icons/up.png').show(200);        
        } else {
            text.slideUp('200');
            $('img', this).attr('src', 'images/icons/down.png').show(200);      
        }

    });

    $('img', this).attr('src', 'images/icons/up.png').show(200);

  });
});

This is my html code what i have.

<section id="box-ui">
    <header class="head-title">Test kopje<img class="toggle"  src="images/icons/up.png" /></header>
    <div id="bericht" class="berichtui">
    <a href="#">Beetje tekst hier maar....?</a><br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?</div>
</section>

<section id="box-ui">
    <header class="head-title">Test kopje<img class="toggle"  src="images/icons/up.png" /></header>
    <div class="berichtui">
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?<br>
    Beetje tekst hier maar....?</div>
</section>

So what am i doing wrong people who can tell me ;)

This is what i have on JSFIDDLE .

Answer 1

Only the current document has a ready event, the window does not.
In the last line of code where you're setting the source, this is the window object ?
The ID box-ui is used twice, and so are some of the other ID's ?
Don't quote the speed for animation methods.
You have also set the arrow image as the background.

$(document).ready(function () {
    $('header').on('click', function () {
        var section = $(this).closest('section'),
            text    = section.find('.berichtui'), // use classes, not ID
            img     = $(this).find('img'),
            state   = text.is(':hidden');

        text[state?'slideDown':'slideUp'](200);
        img.prop('src', function() {
            return state ? 'images/icons/up.png' : 'images/icons/down.png';
        });
    });

    $('.box-ui img').show(200);
});

FIDDLE