The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to make show&Hide button like this

5 posters

Go down

Solved How to make show&Hide button like this

Post by MassKilling Sun 22 Jul 2012 - 8:44

How to make show&Hide button like this Aaa10
How to make show&Hide button like this Aaa11
Give me the code please Very Happy

my forum is PHPbb2
*sorry for my bad english


Last edited by MassKilling on Sun 29 Jul 2012 - 4:03; edited 2 times in total
MassKilling
MassKilling
Forumember

Male Posts : 33
Reputation : 2
Language : Indonesia
Location : Indonesia

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by MassKilling Thu 26 Jul 2012 - 10:34

bump
MassKilling
MassKilling
Forumember

Male Posts : 33
Reputation : 2
Language : Indonesia
Location : Indonesia

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by nathanadhitya Thu 26 Jul 2012 - 12:09

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
avatar
nathanadhitya
Forumember

Male Posts : 98
Reputation : 2
Language : English And Indonesia

View user profile http://tr-teamwork.mydiscussionboard.com

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by lilyheart7 Thu 26 Jul 2012 - 12:52

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.
lilyheart7
lilyheart7
Forumember

Posts : 40
Reputation : 7
Language : English

View user profile http://houseofanubis.forumotion.com

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by MassKilling Fri 27 Jul 2012 - 9:44

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

*sorry for my bad english
MassKilling
MassKilling
Forumember

Male Posts : 33
Reputation : 2
Language : Indonesia
Location : Indonesia

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by lilyheart7 Fri 27 Jul 2012 - 11:37

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
lilyheart7
Forumember

Posts : 40
Reputation : 7
Language : English

View user profile http://houseofanubis.forumotion.com

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by MassKilling Sat 28 Jul 2012 - 7:28

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 Sad


How to make show&Hide button like this Plus_16 to you for trying to help me Very Happy
*sorry for my bad english Very Happy
MassKilling
MassKilling
Forumember

Male Posts : 33
Reputation : 2
Language : Indonesia
Location : Indonesia

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by lilyheart7 Sat 28 Jul 2012 - 14:28

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><
lilyheart7
lilyheart7
Forumember

Posts : 40
Reputation : 7
Language : English

View user profile http://houseofanubis.forumotion.com

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by Sanket Sat 28 Jul 2012 - 14:52

Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by MassKilling Sun 29 Jul 2012 - 4:04

Thank you Sanket Very Happy
Solved.
MassKilling
MassKilling
Forumember

Male Posts : 33
Reputation : 2
Language : Indonesia
Location : Indonesia

View user profile

Back to top Go down

Solved Re: How to make show&Hide button like this

Post by ankillien Sun 29 Jul 2012 - 4:05

Topic Solved & Locked
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

View user profile

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum