Question

im using a little jquery code i found on a website some time ago to toggle content.
by default the content is closed and when a special link is clicked the content opens up in a smooth slide animation.
so far so good.
the problem is, that the content which is supposed to be hidden by default is visible until the page is loaded, then closes as soon as the jquery is loaded.
i have placed the jquery at the end of the page to reduce loading time for the website content.
i know this behaviour is natural but i have seen other toggle scripts before where the content that can be opened was closed even before the jquery bit loads.
the problem is that people with slow internet connections see the “hidden” part for quite some time until the page has finished loading. then the part closes because its supposed to be closed by default.

i have tried css to keep the part closed even before the jquery is loaded but the problem is that i can not open it anymore by clicking on the “show more” link because the css still forces it to stay closed..
shiatsu!!

heres the code i use:

<div class="morepara"> content that should be hidden by default can be opened by clicken on the image link below</div>

<p class="togglebutn">
<a>
<img src="/images/read-more.png" class="img-swap" aid="myImage"/>
</a>
</p>

<script type="text/javascript">
var $s = jQuery.noConflict();
$s('document').ready(function() {
    $s('.morepara div').hide();
    $s('.togglebutn a').click( function() {
        var parentpara = $s(this).parent().prev().children();
        parentpara.toggle('normal');
    });
});
$s(function() {
    $s(".img-swap").live('click', function() {
        if ($s(this).attr("class") == "img-swap") {
            this.src = this.src.replace("-more", "-less");
        } else {
            this.src = this.src.replace("-less", "-more");
        }
        $s(this).toggleClass("on");
    });
});
</script>

oh and the image-swap script works great, no problems with that part 🙂

thanks in advance! 🙂

Answer 1

By giving your <div class="morepara"> a display:none; with CSS the div will never show up when opening the site, not even for people with a slow internet connection.

<div class="morepara" style="display:none;">

It is actually the same as: $s('.morepara').hide(); Only that one will be executed when the page is fully loaded.