jQuery ein-und ausblenden, Umschalten div mit der plus und minus-Symbol

Habe ich den funktionsfähigen code für das ein-und ausblenden der div. Wie sollte ich hinzufügen, zwei verschiedene icons als sprite-image, wenn das ein-und ausblenden aktiv sind?

Beispiel: + Symbol für show me, dann eine - Symbol für mich verstecken.

Hier ist die code, die ich habe:
http://jsfiddle.net/BLkpG/

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

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

Müssen ändern Bild, um die oben genannten ein-und ausgeschaltet, um eine + oder -.

Dank

InformationsquelleAutor der Frage Paul | 2013-01-06

Probieren Sie etwas wie dieses

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

InformationsquelleAutor der Antwort Enve

Ich würde sagen, der eleganteste Weg ist:

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

dann 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");
}

und js:

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

FIDDLE

InformationsquelleAutor der Antwort Vytautas Butkus

Umschalten der text Show und Hide und bewegen Sie Ihre backgroundPosition Y Achse

LIVE-DEMO

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

InformationsquelleAutor der Antwort Roko C. Buljan

dies funktioniert:

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>

in der CSS statt content:" +"; Sie können ein background-image (mit background-position:right center; und background-repeat:no-repeat und vielleicht machen die .show_hide angezeigt, wie durch block und geben ihm eine Breite, so dass die Hg-Bild ist nicht überlagert durch den link-text selbst).

InformationsquelleAutor der Antwort fdiv_bug

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

});

InformationsquelleAutor der Antwort Bravo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.