0
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
53
Views
4 Years
Discussion Span
Last Post by code_rum
1

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

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.

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.