The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make show&Hide button like this

View previous topic View next topic Go down

Solved How to make show&Hide button like this

Post by MassKilling on July 22nd 2012, 8:44 am



Give me the code please Very Happy

my forum is PHPbb2
*sorry for my bad english


Last edited by MassKilling on July 29th 2012, 4:03 am; edited 2 times in total

MassKilling
Forumember

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

Back to top Go down

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

Post by MassKilling on July 26th 2012, 10:34 am

bump

MassKilling
Forumember

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

Back to top Go down

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

Post by nathanadhitya on July 26th 2012, 12:09 pm

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

nathanadhitya
Forumember

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

http://tr-teamwork.mydiscussionboard.com

Back to top Go down

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

Post by lilyheart7 on July 26th 2012, 12:52 pm

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
Forumember

Posts : 40
Reputation : 7
Language : English

http://houseofanubis.forumotion.com

Back to top Go down

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

Post by MassKilling on July 27th 2012, 9:44 am

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

*sorry for my bad english

MassKilling
Forumember

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

Back to top Go down

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

Post by lilyheart7 on July 27th 2012, 11:37 am

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
Forumember

Posts : 40
Reputation : 7
Language : English

http://houseofanubis.forumotion.com

Back to top Go down

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

Post by MassKilling on July 28th 2012, 7:28 am

@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


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

MassKilling
Forumember

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

Back to top Go down

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

Post by lilyheart7 on July 28th 2012, 2:28 pm

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
Forumember

Posts : 40
Reputation : 7
Language : English

http://houseofanubis.forumotion.com

Back to top Go down

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

Post by Sanket on July 28th 2012, 2:52 pm


Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

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

Post by MassKilling on July 29th 2012, 4:04 am

Thank you Sanket Very Happy
Solved.

MassKilling
Forumember

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

Back to top Go down

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

Post by ankillien on July 29th 2012, 4:05 am

Topic Solved & Locked

ankillien
Energetic

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

http://www.webartzforum.com/

Back to top Go down

View previous topic View next topic Back to top


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