Cómo utilizar jQuery para alternar entre un signo más y un signo menos al contraer y expandir?

Estoy usando el siguiente código. Lo que quiero hacer es tener un signo + o - en la vista expandida o contraída. ¿Cómo puedo hacer eso? Aquí está el código:Cómo utilizar jQuery para alternar entre un signo más y un signo menos al contraer y expandir?

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

Fuente

2010-04-27 Autolycus

Cambiar el marcado de la msg_head a algo como esto:

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

y cambiar la función de palanca de parecerse a esto:

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

Fuente

2010-04-27 20:35:04

solo quería tener en cuenta que tengo algo exactamente similar a este, pero tengo mi div clic mediante un enlace href. Si coloco la etiqueta span dentro de la etiqueta , no funcionará. hice un violín aquí: http://jsfiddle.net/ultraloveninja/xBxa4/5/ Estoy bastante seguro de que hay una manera de hacer que funcione con los enlaces href, pero yo sólo quería compartir desde que estaba tirando de mi cabello preguntándome por qué no estaba funcionando para mí. – ultraloveninja

Tengo esto mismo en mi propio sitio web. He aquí cómo lo hago:

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

El HTML es el siguiente:

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

Fuente

2010-04-27 20:27:40 dclowd9901

La manera más fácil de hacerlo es con el .toggleClass(className). Usando este método puedes agregar o eliminar una clase de un elemento. Por lo tanto, modificar el código al código (no probado) a continuación debería ser el truco. Deberá compensar el relleno con una cantidad equivalente para que se ajuste a sus archivos gráficos.

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

Fuente

2010-04-27 20:35:30 ahsteele

Necesita que su '.toggleClass' se aplique a' $ (this) 'no a' .msg_head' fuera de la función de clic. Y necesita '$ ('. Msg_body'). Hide();' – Mottie

@fudgey. Pensé que .slideToggle logró ocultarlo. He sacado el .toggleClass dentro del evento, pero pensé que encadenarlo en el '.click' era genial. Para ser totalmente honesto, sé lo suficiente como para ser peligroso. Así que esta es una buena oportunidad de aprendizaje para mí, ya que no pretendo ser un experto, solo un curioso profesional que busca mejorar. ;-) – ahsteele

Realmente hace lo que piensas, pero tenerlo fuera de la función de hacer clic lo hace agregar la clase 'msg_head_expanded' mientras el mensaje estaba oculto. Y después de hacer clic en la cabecera, toggleClass no se volvió a llamar, por lo que la clase 'msg_head_expanded' siempre estaba allí. De todos modos, te di +1 porque así es como haría esto ahora :) – Mottie

Cómo utilizar jQuery para alternar entre un signo más y un signo menos al contraer y expandir?

Respuesta

Cuestiones relacionadas