I am using the code below. What I want to do is have a + or - sign on expanded or collapsed view. How can I do that? Here is the code:
<!--//---------------------------------+
// Developed by Roshan Bhattarai |
// http://roshanbh.com.np |
// Fell Free to use this script |
//---------------------------------+-->
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").show();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
</head>
<body>
<div align="center">
<p>Click on the each news head to toggle
</p>
</div>
<div class="msg_list">
<p class="msg_head">Header-1 </p>
<div class="msg_body">
or开发者_开发知识库em ipsum dolor sit amet
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
consectetuer adipiscing elit orem ipsum dolor sit amet
</div>
</div>
</body>
</html>
Change the markup of the msg_head to something like this-
<p class="msg_head">Header-1 <span>[-]</span></p>
and change the toggle function to look like this-
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
$(this).children("span").text("[+]");
}, function() {
$(this).children("span").text("[-]");
});
Easiest way to do this is with the .toggleClass( className ). Using this method you can add or remove a class from an element. So modifying your code to the (untested) code below should do the trick. You'll want to offset the padding by an equivalent amount to fit your graphic files.
JavaScript
$(".msg_head").click(function() {
$(this).next(".msg_body").slideToggle(100);
$(this).toggleClass('msg_head_expanded');
});
CSS
.msg_head
{
padding: 5px 10px;
cursor: pointer;
position: relative;
background:#FFCCCC url('plus.png') no-repeat 0 50;
margin:1px;
}
.msg_head_expanded
{
background:#FFCCCC url('minus.png') no-repeat 0 50;
}
I have this very thing on my own website. Here's how I do it:
$(".question").click(function () {
if ($(this).next(".answer").is(":hidden")) {
$(this).next(".answer").slideDown("slow");
$(this).children('span').text('-');
} else {
$(this).next(".answer").slideUp("slow");
$(this).children('span').text('+');
}
});
The HTML looks like this:
<div class="question">
<span>+</span>blahblah
</div>
<div class="answer">blahblah</div>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论