[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Show/Hide HTML

Posted on 2004-11-20
6
Medium Priority
?
163 Views
Last Modified: 2010-04-09
Hi

I want to show a button that display "Show" initially.
When click on it, the hidden html text will display & the button will show "hide".

Now when user click "hide", the shown html text will be hidden again.

Pls help.

Thanks & Rgds
Heng03

0
Comment
Question by:heng03
  • 3
  • 2
6 Comments
 
LVL 14

Accepted Solution

by:
boonleng earned 180 total points
ID: 12633565
<html>
<head>
<script>
function change(button) {
  var element = document.getElementById('message');

  if (button.value == 'show') {
    button.value = 'hide';
    element.style.visibility = 'visible';
  } else {
    element.style.visibility = 'hidden';
    button.value = 'show';
  }
}
</script>

</head>
<body>
<form>
<input type="button" value="show" onclick="change(this)">
<div id="message" style="visibility:hidden">Message Here</div>
</form>

</body>
</hrml>
0
 
LVL 25

Assisted Solution

by:archrajan
archrajan earned 120 total points
ID: 12633922
<script language="JavaScript" type="text/javascript">

    function change_button(this_button)
    {
        document.getElementById(this_button).value = (document.getElementById(this_button).value == 'Hello')? 'World' : 'Hello';
    }

</script>

<form action="javascript:void(0);">
    <input type='submit' name'button' value='Hello' id='this_button' onclick='change_button("this_button");' />
</form>
0
 

Author Comment

by:heng03
ID: 12637488
Hi

I increase point to 75.
I would like both you to share.

Thanks & Rgds
Heng03
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:heng03
ID: 12637655
Hi boonleng

how to suppress the spaces (lines) when invisible mode ?
That is, my messages contains many lines.

Thanks & Rgds
Heng03
0
 
LVL 14

Expert Comment

by:boonleng
ID: 12641500
Use "display" instead of "visibility".

if (button.value == 'show') {
  button.value = 'hide';
  element.style.display = 'block';
} else {
  element.style.display = 'none';
  button.value = 'show';
}

<div id="message" style="display: none"> Message Here</div>
0
 

Author Comment

by:heng03
ID: 12679287
Hi Boonleng

It do not work for style="display:none".
Why ?

Thanks & Rgds
Heng03
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question