Hiding <div> Boxes With Javascript

FirefoxRocks

Aug 14 2006, 10:28 PM

This is my first help post in this Java/JavaScript section.

Can someone write/find me a piece of code that will hide <div> boxes?

Preferred stuff:
There is a bar that has the subtitle of the <div> box contents. A button on the right side of the bar shows and hides the div box.
Contents are in a box with a border and slides in and out of the bar smoothly and relatively quickly.
Box MUST be customizable using CSS internal/external stylesheets.

Any help would be appreciated. All codes will be tested and best code be selected.

Comment/Reply (w/o sign-up)

TypoMage

Aug 15 2006, 01:33 AM

Hmm why don't you put your problem in the shoutbox. Someone will know about your problem. Sadly I do not know anything a about JavaScript. But that is all I got.

Comment/Reply (w/o sign-up)

hype

Aug 16 2006, 11:52 AM

I try creating the source code for you... I'll give it a shot, hope this what you're looking for...

Preview : http://www.hype.trap17.com/showhide.html

CODE

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Show(num)
{
    if (num == 1)
    {
        text1.style.display = "block";
        text2.style.display = "none";
    }
    else if (num == 2)
    {
        text1.style.display = "none";
        text2.style.display = "block";
    }

}

</script>

</head>
<body>

<div id="text1" style="display:none">
<a href="java script:void(null)" onclick="Show(2)">Hide Text</a>

<br/>Text here...
</div>

<div id="text2" style="display:block">
<a href="java script:void(null)" onclick="Show(1)">Show Text</a>
</div>

</body>
</html>

If you encounter any problems feel free to ask!

Comment/Reply (w/o sign-up)

FirefoxRocks

Aug 16 2006, 01:32 PM

That is sort of what I'm looking for.
Could you make it so that the box can slide in and out of the "Text Here" thing? That would make it look neat and attractive.

If noone else comes up with another code, I will use what's there.

Comment/Reply (w/o sign-up)

hype

Aug 16 2006, 01:55 PM

I dont exactly get what you mean... any examples or what? Is it like a table with border that disappear when you click the word hide? Sorry, my english isnt that good...

Comment/Reply (w/o sign-up)

fffanatics

Aug 16 2006, 03:01 PM

In order to make it look like it is sliding from the top of the screen out without using flash, you would have to write a javascript function that would change the the css top attribute from the same height as where the show text link is to that number plus the height of the new text incrementaly so that it looks like it slides. You also would need to set the divs position attribute to aboslute and define exactly where you want it to be on the page. For the functions you would do something like

CODE

The only problem with the script above is that you are going to have to find a way to slow down the sliding using a pause script that also still flushes the screen. Try googling for a moving image script and just take the pause part of it. Currently im at work so i cant really spend that much time finding one. Atleast here is a start for you.

Comment/Reply (w/o sign-up)

FirefoxRocks

Aug 19 2006, 12:27 AM

QUOTE(hype @ Aug 16 2006, 06:52 AM)

I try creating the source code for you... I'll give it a shot, hope this what you're looking for...

Preview : http://www.hype.trap17.com/showhide.html

CODE

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Show(num)
{
    if (num == 1)
    {
        text1.style.display = "block";
        text2.style.display = "none";
    }
    else if (num == 2)
    {
        text1.style.display = "none";
        text2.style.display = "block";
    }

}

</script>

</head>
<body>
<div id="text1" style="display:none">
<a href="java script:void(null)" onclick="Show(2)">Hide Text</a>

<br/>Text here...
</div>

<div id="text2" style="display:block">
<a href="java script:void(null)" onclick="Show(1)">Show Text</a>
</div>

</body>
</html>

If you encounter any problems feel free to ask!

The selected option is that quoted post. Thank you for the code! I will implement it in plenty of my pages.

Look for JavaScript help #2! You might get a chance to answer my question there.

Comment/Reply (w/o sign-up)

serverph

Aug 19 2006, 12:32 AM

problem resolved. closed as per thread starter's request.

Comment/Reply (w/o sign-up)

FeedBacker

Apr 5 2008, 08:02 AM

I want some javascript code. I.E.,when I click one radio button one form will be display.

-reply by suhasini

Comment/Reply (w/o sign-up)

Hiding <div> Boxes With Javascript - Javascript Help #1

Hiding <div> Boxes With Javascript - Javascript Help #1