wake-up-neo.com

jQuery ein- und ausblenden, um div mit Plus- und Minuszeichen umzuschalten

Ich habe den Code für die Show und verstecken die div. Wie füge ich zwei verschiedene Symbole als Sprite-Bild hinzu, wenn das Ein- und Ausblenden aktiv ist?

Zum Beispiel: + - Symbol für Anzeigen, dann ein - - Symbol für Ausblenden.

Hier ist der Code, den ich habe: http://jsfiddle.net/BLkpG/

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

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

Wenn Sie zwischen + oder - umschalten, müssen Sie das Bild nach oben ändern.

Vielen Dank

jqueryhtmlcsshideshow
16
Paul

Versuchen Sie so etwas

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 

20
Enve

Ich würde sagen, der eleganteste Weg ist dieser:

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

GEIGE

10
Vytautas Butkus

Schalten Sie den Text Show und Hide um und verschieben Sie Ihre backgroundPositionY - 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;  
}
9
Roko C. Buljan

Hier ist eine kurze Bearbeitung von Enves Antwort. Ich mag die Lösung von roXor, aber Hintergrundbilder sind nicht erforderlich. Und jeder scheint auch einen preventDefault vergessen zu haben.

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

3
Bram Vanroy

das 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>

im CSS kann anstelle von content:" +"; ein background-image eingefügt werden (mit background-position:right center; und background-repeat:no-repeat und möglicherweise .show_hide als Block dargestellt und ihm eine Breite geben, damit das bg-Bild nicht mit dem Linktext selbst überlagert wird).

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

});
0
Bravo

Hier ein Beispiel, wie Sie dies mit einem Pfeil anstelle von + und - tun. Dies verwendet jQuery, um Klassen im Element zu ändern, und CSS, um den Pfeil zu formatieren.

$(".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>

0
blackandorangecat