Menu
I'm very familiar with HTML and CSS, but new to Javascript and jQuery. I am trying to figure out how to have multiple jQuery effects occur with one event (.click).
I have a DIV (.bio-description) that has a lot of text. I have made the .bio-description DIV height only 50px and set the overflow to hidden. When someone CLICKS the .bio-readmore DIV, I would like the following to happen: 1).bio-description DIV's height is set to 'auto' (so all the text is now visible), 2) .bio-readmore DIV disappears, and 3) .bio-readless DIV appears.
I have read quite a bit on jQuery.com and done a lot of searching around on Google. I have probably come across the answer already, but just haven't understood how to implement it.
Below is the code I have so far. The .bio-readmore does hide when clicked, but the other two actions don't occur. I have also tried different effects other than .height, like .css, .addClass, and .animate. However, nothing works and I figure it must have something to do with how I am trying to handle multiple effects with one event.
Thank you for any help you can offer!
-Mark
<script>
$(document).ready(function(){
$(".bio-readmore").click(function() {
$(".bio-description").height("auto");
}, function () {
$(".bio-readmore").hide();
}, function () {
$(".bio-readless").show();
});
});
</script>
<style type="text/css">
#wrapper {width:600px; margin:0 auto;}
.bio-description {background:#CCCCCC; padding:10px; height:50px; overflow:hidden;}
.bio-readmore {float:right; margin-right:40px; background:#66CC66; padding:3px;}
.bio-readless {display:none; float:right; margin-right:40px; background:#FF3333; padding:3px;}
</style>
</head>
<body>
<div id="wrapper">
<div class="bio-description">
<p>Morbi ut tincidunt magna. Ut justo eros, gravida a interdum eget, molestie eget nibh. Morbi sed mauris lectus, id tincidunt lectus. Sed gravida consectetur enim sit amet sodales. Proin ligula metus, lobortis nec commodo rutrum, tincidunt sit amet turpis. Nullam condimentum urna nec libero fermentum non tristique dolor pulvinar. Cras tortor nisi, convallis a laoreet sit amet, bibendum sed nunc. Cras quam enim, mollis non hendrerit sit amet, ullamcorper quis libero.</p>
</div>
<div class="bio-readmore">Read More ▼</div>
<div class="bio-readless">Read Less ▲</div>
</div>
</body>
552
You can run an entire function on a click event (multiple lines):
$(".bio-readmore").click(function() {
$(".bio-description").height("auto");
$(".bio-readmore").hide();
$(".bio-readless").show();
});
aaaaaaand you're done! I love JQuery.
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
