Member Avatar for andi.andiiimintoyouu 
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;
    });
});
  • 3 Contributors
  • 9 Replies
  • 259 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by code_rum
Member Avatar for code_rum

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

Member Avatar for andi.andiiimintoyouu

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

Member Avatar for pixelsoul

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

Member Avatar for code_rum

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

Edited by code_rum
Member Avatar for pixelsoul

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;
    });
});
Member Avatar for andi.andiiimintoyouu

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.

Member Avatar for pixelsoul

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/

Member Avatar for andi.andiiimintoyouu 
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>
Member Avatar for code_rum 
<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.

Edited by code_rum
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.