CODEWITHSUNDEEP
jqueryhiddenslidedownslideup
DThomas
DThomas

Reputation: 5

How to set the jQuery slideUp() Method to hide elements when the page loads

I am using the slideUp and slideDown jQuery function to display images on a webpage that slide text down once they are clicked on. In the following code I have the js set to do this but when I load the page the text is already down. The slide function works, but I would like to have the page load with the text hidden/up.

Any suggestions as to how I can alter the code to have the text hidden when the page loads would be highly appreciated. Thank you in advance for taking some time to look at this!

Here the code:

jQuery(document).ready(function($) {
  $(".pic").click(function(e) {

var more = $(this).find('.more');

if ( $(more).is(':visible') ) {
    $(more).slideUp('fast')
}
else {
    $(more).slideDown()
}
$('.more').not( $(more)).slideUp()
})

 });

Upvotes: 0

Views: 1075

Answers (1)

War10ck
War10ck

Reputation: 12508

You have two options. Either set the initial .pic state to hidden in your CSS like so:

.more {
    display: none;
}

or immediately trigger your JavaScript event after setting up the callback, which because they're presently visible, will hide them. This can be done like so:

jQuery(document).ready(function($) {
    $(".pic").click(function(e) {
        var more = $(this).find('.more');

        if ($(more).is(':visible')) {
            $(more).slideUp('fast')
        } else {
            $(more).slideDown()
        }
        $('.more').not($(more)).slideUp()
    }).trigger('click');
 });

Upvotes: 1

Related Questions