Sometimes we may need to hid and show a paragraph.
code:
<html>
<head>
<style>
.sessionTitle {
width: 750px;
height: 43px;
background: green;
border: 1px solid #CCCCCC;
display: block;
border-radius:5px;
}
.sessionTitle:hover {
background: red;
}
.sessionTitle img{
float: left;
padding-left: 18px;
padding-top: 17px;
}
.detailInfo {
display: block;
width: 750px;
padding: 20px 0;
background: lightblue;
border-radius:5px;
}
.sessionTitle .white_detail{
display: block;
color: #FFF;
font-size: 17px;
font-weight: bold;
padding-left: 40px;
margin-top: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Detailed Info expand and collapse
$(".detailInfo").hide();
$(".sessionTitle").click(function(){
if($(this).next(".detailInfo").css("display")=="none"){
$(this).next(".detailInfo").show();
$(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_minus.gif");
}
else{
$(this).next(".detailInfo").hide();
$(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_plus.gif");
}
});
});
</script>
</head>
<body>
<h1>Hide and show a text paragraph using jQuery</h1>
<div class="sessionTitle">
<img src="http://www3.telus.net/jianlu58/white_plus.gif" />
<div class="white_detail">
Tablet computer
</div>
</div>
<div class="detailInfo">
<p>A tablet computer, or simply tablet,
is a mobile computer with display, circuitry and battery in a single unit.</p>
</div>
</body>
</html>
Demo
Hide and show a text paragraph using jQuery
Tablet computer
A tablet computer, or simply tablet,
is a mobile computer with display, circuitry and battery in a single unit.
This is exactly what i've been looking for, except that I need several of those text boxes and when i put more than one code it gets blocked and then wont show the paragraph. Any ideas how to fix this? I really appreciate it. :)
ReplyDeletewhat happened when image is save in images folder . not from http ?
ReplyDeletewhat we write in script?
$(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_minus.gif");
instead of this http?
how you write as a png ?