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
andi.andiiimintoyouu
0
Newbie Poster
pixelsoul
272
Red Pill
Featured Poster
code_rum
8
Junior Poster in Training
pixelsoul
272
Red Pill
Featured Poster
andi.andiiimintoyouu
0
Newbie Poster
pixelsoul
272
Red Pill
Featured Poster
andi.andiiimintoyouu
0
Newbie Poster
code_rum
8
Junior Poster in Training
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.