How to make show&Hide button like this

Give me the code please

my forum is PHPbb2
*sorry for my bad english

bump

Hey youre from indonesia lol mee too and halo MassKilling
and it's type of toggle and the problem for your forum must be PunBB And Phpbb2

That is not very hard to do, actually.

I believe that is the Homepage Message, so you'd need to put the following code (after edited) in that.

Code:

<style type="text/css">
div {
position: absolute;
left: 0px;
top: 29px;
width: 280px;
padding: 10px;
color: black;
border: none;
display: none;
}
</style>
 
 
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide'){
document.getElementById('bt1').value = 'Title Here';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide';
document.getElementById(id).style.display = 'inline';
}
}
 
</script>

<input type=button name=type id='bt1' value='Title Here' onclick="setVisibility('sub3');";>
 
<div id="sub3">Your HTML/Text Here
</div>

So where it says "Title Here" you put the title of your content or something along the lines of "Show Content" and for "Your HTML/Text Here", you put your HTML or Text or etc. You can change "Hide" as well.

I hope this is what you're looking for.

it doesn't work
if i copy that code in my homepage message
my forum is blank

*sorry for my bad english

Oh! I'm so sorry, the code should be:

Code:

<style type="text/css">
div#sub3 {
position: absolute;
left: 0px;
top: 29px;
width: 280px;
padding: 10px;
color: black;
border: none;
display: none;
}
</style>
 
 
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide'){
document.getElementById('bt1').value = 'Title Here';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide';
document.getElementById(id).style.display = 'inline';
}
}
 
</script>

<input type=button name=type id='bt1' value='Title Here' onclick="setVisibility('sub3');";>
 
<div id="sub3">Your HTML/Text Here
</div>

Sorry, I forgot to put the #sub3 on the div.

lilyheart7 wrote:Oh! I'm so sorry, the code should be:

Code:

<style type="text/css">
div#sub3 {
position: absolute;
left: 0px;
top: 29px;
width: 280px;
padding: 10px;
color: black;
border: none;
display: none;
}
</style>
 
 
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide'){
document.getElementById('bt1').value = 'Title Here';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide';
document.getElementById(id).style.display = 'inline';
}
}
 
</script>

<input type=button name=type id='bt1' value='Title Here' onclick="setVisibility('sub3');";>
 
<div id="sub3">Your HTML/Text Here
</div>

Sorry, I forgot to put the #sub3 on the div.

if i put the code to my homepage message,
the result is

result:

Rideem3 wrote:Put this in an announcement or wherever you want the toggling to occur:

Code:

<div id="toggle_ele">Your content here</div>
<input type="button" onClick="toggleEle('toggle_ele');" value="Toggle" />
<script type="text/javascript">
function toggleEle(id) {
if (document.getElementById(id).style.display != "none") document.getElementById(id).style.display = "none";
else (document.getElementById(id).style.display = "block";
}
</script>

it doesn't work
my content doesn't appear


to you for trying to help me
*sorry for my bad english

Try this one:

Code:

<style type="text/css">
div#sub3 {
position: absolute;
left: 0px;
top: auto;
padding: 20px;
color: black;
border: none;
display: none;
}
</style>
 
 
<script language="JavaScript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide'){
document.getElementById('bt1').value = 'Title Here';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide';
document.getElementById(id).style.display = 'inline';
}
}
 
</script>

<input type=button name=type id='bt1' value='Title Here' onclick="setVisibility('sub3');";>
 
<div id="sub3">Your HTML/Text Here
</div><

Please see the tutorial here.
http://www.webartzforum.com/t903-making-show-hide-content

You can see the working demo here.
http://webartzdemo.forumotion.com/Show-Hide-Content-h15.htm

Thank you Sanket
Solved.