Question

I’ve added a simple jquery slideDown function to a client’s website but they want to add some style via javascript so that for anyone with JS disabled they still see the content.

<script>
    $(".click").click(function () {
        $(".morecontent").slideToggle("slow");
    });
</script>

.morecontent is currently set to display:none via the stylesheet, so basically I want to include this style in the script as oppose to the stylesheet

Answer 1

To set the CSS using jQuery, use:

$(".morecontent").css("display", "none");

The display:none property can also be set by using .hide(). Note: You should call this code when the document is ready, ie, the element is already defined. To achieve this, use:

$(document).ready(function(){
    $(".morecontent").hide();
})

When JavaScript is disabled, the elements will be visible (because the display:none at the stylesheet has been removed). When JavaScript is enabled, the script will hide the .morecontent, so that it can be slided in.