CODEWITHSUNDEEP
javascriptshow-hide
NeverPhased
NeverPhased

Reputation: 1566

Javascript show/hide: How to set to Show

I have the following code:

<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>

        <div id="elaborate_1" class="expandable-box" style="display:none;">

                <div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
                <p class="nomargin nopadding">HELLO</p>
                </div><!-- .descpription -->

        </div>

The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.

How can I do this?

Upvotes: 0

Views: 131

Answers (3)

woodykiddy
woodykiddy

Reputation: 6455

Just remove style="display:none;" from your html element

and add following code to your js function (for reference)

document.getElementById("elaborate_1").style.display = "block";

Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.

A little Jquery sample code: 

$('a.button').click(function(){
    $('#elaborate_1').toggle("slow"); 
});

Upvotes: 0

Fosco
Fosco

Reputation: 38526

Remove the display:none from the containing element:

<div id="elaborate_1" class="expandable-box">

If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.

Upvotes: 1

Kurt Du Bois
Kurt Du Bois

Reputation: 7665

Change the display:none to display:block on your elaborate_1 div.

Upvotes: 1

Related Questions