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;
    });
});

What are you trying to do?
Can you please elaborate..

i tocreate a toggle button when i click it can show me a text or some images,this im trying to do.

This code should work fine.
What is the problem that you're having?

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

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;
    });
});

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.

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/

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