Как использовать jQuery для переключения знака "плюс" и "минус" при смене и расширении?

Я использую код ниже. Я хочу сделать знак + или - в расширенном или свернутом виде. Как я могу это сделать? Вот код:

<!--//---------------------------------+
//  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">
            orem 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>

Ответ 1

Измените разметку msg_head на что-то вроде этого -

<p class="msg_head">Header-1 <span>[-]</span></p>

и измените функцию переключения, чтобы выглядеть так:

$(".msg_head").click(function(){
    $(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
    $(this).children("span").text("[+]");
}, function() {
    $(this).children("span").text("[-]");
});

Ответ 2

Самый простой способ сделать это - .toggleClass( className ). С помощью этого метода вы можете добавить или удалить класс из элемента. Так что модификация вашего кода до (непроверенного) кода ниже должна сделать трюк. Вы захотите компенсировать заполнение на эквивалентную сумму, соответствующую вашим графическим файлам.

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

Ответ 3

У меня есть это на моем собственном сайте. Вот как я это делаю:

$(".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('+');
    }
});

HTML выглядит так:

<div class="question">
    <span>+</span>blahblah
</div>
<div class="answer">blahblah</div>