html
<div class="example2">
<p>This is some text This is some textThis is some textThis is some textThis is some text
This is some textThis is some textThis is some textThis is some textThis is some text</p>
</div>
Css
.button{
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background:#eee;
border:0;
color:#333;
cursor:pointer;
font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
margin:0;padding:6px 4px;
text-decoration:none;
position:relative
}
.example1 p, .example2 p{
border:1px solid #eee;background:#eee;
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
width:400px;
padding:10px;
margin:10px 0
}
Javascript code
$(document).ready(function() {
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
$('a#toggle-example2').click(function() {
$('.example2').slideToggle(1000);
return false;
});
});
andi.andiiimintoyouu
0
Newbie Poster
Recommended Answers
Jump to PostThis code should work fine.
What is the problem that you're having?
Jump to PostHave a look at your own code
When a button is clicked it shows <p> tag content
The way you mentionedhttp://jsfiddle.net/code_rum/N7x78/
It seems no problem with your code
Jump to PostMy only real suggestion would be to add a stop() in there before the toggle action, that way if someone clicks on it like crazy it won't keep running the toggle for every click they had made.
$(document).ready(function() { $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>'); $('a#toggle-example2').click(function() { $('.example2').stop().slideToggle(1000); return …
All 9 Replies
code_rum
8
Junior Poster in Training
What are you trying to do?
Can you please elaborate..
andi.andiiimintoyouu
0
Newbie Poster
i tocreate a toggle button when i click it can show me a text or some images,this im trying to do.
pixelsoul
272
Red Pill
Featured Poster
This code should work fine.
What is the problem that you're having?
code_rum
8
Junior Poster in Training
Have a look at your own code
When a button is clicked it shows <p> tag content
The way you mentioned
http://jsfiddle.net/code_rum/N7x78/
It seems no problem with your code
pixelsoul
272
Red Pill
Featured Poster
My only real suggestion would be to add a stop() in there before the toggle action, that way if someone clicks on it like crazy it won't keep running the toggle for every click they had made.
$(document).ready(function() {
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
$('a#toggle-example2').click(function() {
$('.example2').stop().slideToggle(1000);
return false;
});
});
andi.andiiimintoyouu
0
Newbie Poster
i am a biginer and im tryin to learn from google from youtube ect.. the proble is i put this code in html and javascipt page but this doesnt show nothing.what name i should give to the pages to work fine.what i shoul do.
pixelsoul
272
Red Pill
Featured Poster
That javascript code is jQuery. You need to include the jQuery library in the page for it to work. Here is the link to the website http://jquery.com/
andi.andiiimintoyouu
0
Newbie Poster
i have paste this code inside the html page but nothing is happening what i have to add +
to make this working.
here is the code.
<a href="#" id="toggle-example2" class="button">Open/Close</a>
<div class="example2">
<p>This is some text This is some textThis is some textThis is some textThis is some text
This is some textThis is some textThis is some textThis is some textThis is some text</p>
</div>
<script type="text/Javascript">
$(document).ready(function() {
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
$('a#toggle-example2').click(function() {
$('.example2').slideToggle(1000);
return false;
});
});
</script>
code_rum
8
Junior Poster in Training
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
Paste this into <head> tag. For your code you will be getting an error in console (developer tool).If a script is not running it should be first checked in console (developer tool). So you can get an appropriate error and work accordingly.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.