tag - jQuery oculta y muestra el conmutador div con más y menos íconos

jquery first child

Question

Tengo el código trabajando para el show y oculto el div . ¿Cómo agregaría dos iconos diferentes como una imagen de sprite para cuando se muestren y se oculten mostrar y ocultar?

Por ejemplo: + icono para mostrarme, luego un - icono para ocultarme.

Aquí está el código, tengo: http://jsfiddle.net/BLkpG/

$(document).ready(function(){
   $(".slidingDiv").hide();
   $(".show_hide").show();

    $(''.show_hide'').click(function(){
    $(".slidingDiv").slideToggle();
  });
});

Necesidad de cambiar la imagen a la anterior cuando se cambia a un + o - .

Gracias

Answer 1

Alterne el texto Show y Hide y mueva su fondoPosicione el eje Y

DEMO EN VIVO

$(function(){ // DOM READY shorthand

    $(".slidingDiv").hide();

    $(''.show_hide'').click(function( e ){
        // e.preventDefault(); // If you use anchors
        var SH = this.SH^=1; // "Simple toggler"
        $(this).text(SH?''Hide'':''Show'')
               .css({backgroundPosition:''0 ''+ (SH?-18:0) +''px''})
               .next(".slidingDiv").slideToggle();
    });

});

CSS:

.show_hide{
  background:url(plusminus.png) no-repeat;
  padding-left:20px;  
}

Answer 2

Aquí está una edición rápida de la respuesta de Enve. Me gusta la solución de roXor, pero las imágenes de fondo no son necesarias. Y todo el mundo parece olvidar también un preventDefault .

$(document).ready(function() {
  $(".slidingDiv").hide();

  $(''.show_hide'').click(function(e) {
    $(".slidingDiv").slideToggle("fast");
    var val = $(this).text() == "-" ? "+" : "-";
    $(this).hide().text(val).fadeIn("fast");
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show_hide">+</a>

<div class="slidingDiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.
    Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>

</div>

Answer 3

Aquí hay un ejemplo de cómo hacerlo con una flecha en lugar de un + y - . Esto usa jQuery para cambiar las clases en el elemento, y CSS para estilizar la flecha.

$(".toggleHide").click(function() {
  $(".elementToHide").slideToggle("fast");
  $(this).find("i").toggleClass("down up");
});

i {
  border: solid black;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 5px;
  -webkit-transition-duration: 1s;
  /* Safari */
  transition-duration: 1s;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3 class="toggleHide"><i class="down"></i></h3>
<aside class="elementToHide">
  Content to hide
</aside>

Answer 4

HTML:

<div class="Settings" id="GTSettings">
  <h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>General Theme Settings</h3>
  <div class="options">
    <table>
      <tr>
        <td>
          <h4>Back-Ground Color</h4>
        </td>
        <td>
          <input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly">
        </td>
      </tr>
      <tr>
        <td>
          <h4>Text Color</h4>
        </td>
        <td>
          <input type="text" id="body-fontColor" class="themeselector" readonly="readonly">
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="Settings" id="GTSettings">
  <h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
  <div class="options">
    <table>
      <tr>
        <td>
          <h4>Back-Ground Color</h4>
        </td>
        <td>
          <input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly">
        </td>
      </tr>
      <tr>
        <td>
          <h4>Text Color</h4>
        </td>
        <td>
          <input type="text" id="body-fontColor" class="themeselector" readonly="readonly">
        </td>
      </tr>
    </table>
  </div>
</div>

JavaScript:

$(document).ready(function() {

  $(".options").hide();
  $(".SettingsTitle").click(function(e) {
    var appThemePath = $("#appThemePath").text();

    var closeMenuImg = appThemePath + ''/images/toggle-collapse-light.gif'';
    var openMenuImg = appThemePath + ''/images/toggle-collapse-dark.gif'';

    var elem = $(this).next(''.options'');
    $(''.options'').not(elem).hide(''fast'');
    $(''.SettingsTitle'').not($(this)).parent().children("h3").children("a.toggle").children("img").attr(''src'', closeMenuImg);
    elem.toggle(''fast'');
    var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr(''src'') === closeMenuImg ? openMenuImg : closeMenuImg;
    $(this).parent().children("h3").children("a.toggle").children("img").attr(''src'', targetImg);
  });

});

Answer 5

Prueba algo como esto

jQuery

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $(''.show_hide'').toggle(function(){
       $("#plus").text("-");
       $(".slidingDiv").slideDown();

   },function(){
       $("#plus").text("+");
       $(".slidingDiv").slideUp();
   });

});

HTML

<a href="#" class="show_hide" id="plus">+</a>

<div class="slidingDiv" style="display: block;">
    Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>

CSS

.show_hide {
    display:none;
}
.a{
    font: 2em Arial;
    text-decoration: none
}

DEMO

Answer 6

Yo diría que la forma más elegante es esta:

<div class="toggle"></div>
<div class="content">...</div>

entonces css:

.toggle{
 display:inline-block;
height:48px;
width:48px;  background:url("http://icons.iconarchive.com/icons/pixelmixer/basic/48/plus-icon.png");
}
.toggle.expanded{
  background:url("http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_32.png");
}

y js:

$(document).ready(function(){
  var $content = $(".content").hide();
  $(".toggle").on("click", function(e){
    $(this).toggleClass("expanded");
    $content.slideToggle();
  });
});

FIDDLE

Answer 7

esto funciona:

http://jsfiddle.net/UhEut/

CSS:

.show_hide {
    display:none;
}
.plus:after {
    content:" +";
}
.minus:after {
    content:" -";
}

jQuery:

$(document).ready(function(){
  $(".slidingDiv").hide();
  $(".show_hide").addClass("plus").show();
  $(''.show_hide'').toggle(
      function(){
          $(".slidingDiv").slideDown();
          $(this).addClass("minus");
          $(this).removeClass("plus");
      },
      function(){
          $(".slidingDiv").slideUp();
          $(this).addClass("plus");
          $(this).removeClass("minus");
      }
  );
});

HTML:

<a href="#" class="show_hide">Show/hide</a>

<div class="slidingDiv" style="display: block;">
Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>

en el CSS, en lugar de content:" +"; Puede poner una background-image (con background-position:right center; y background-repeat:no-repeat y tal vez hacer que el .show_hide muestre como un bloque y darle un ancho, para que la imagen bg no sea superpuesta por el link-text en sí).