So ändern Sie die Bildschaltfläche, wodurch das div reduziert / erweitert wird.

Wenn Sie beispielsweise auf "+" klicken, wird dies erweitert. Beim Erweitern wird "+" zu "-". Wenn Sie erneut auf "-" klicken, wird das Div ausgeblendet und "+" wird erneut angezeigt.

Hier ist die Geige

Html:

  <div class="expandContent"><a><img id="arrow" src="http://s13.postimg.org/myy6y2uxv/plus.png"></a></div>

<div class="showMe" style="display:none">This content was hidden, but now shows up </div>

Js:

 $('.expandContent').click(function(){
    $('.showMe').slideToggle('slow');
});
0
Abhishek Sen 1 Dez. 2013 im 16:10

5 Antworten

Beste Antwort

Geigen-Demo

var div_show = $('.showMe'), //cache selectors
    arrow = $('#arrow');
$('.expandContent').click(function () {
    div_show.slideToggle('slow', function () { //slideToggle callback function -> when slideToggle  finishes.
        if ($(this).is(':visible')) { //if div is visible change image to minus 
            arrow.prop('src', 'http://www.a1registry.ca/en/images/minus.png');
        } else { // if div hidden change image to plus
            arrow.prop('src', 'http://s13.postimg.org/myy6y2uxv/plus.png');
        }
    });
});

.slideToggle ()

.Stütze()

.ist ()

:sichtbar

2
Tushar Gupta - curioustushar 1 Dez. 2013 im 12:26

HIER ist eine Geige.

HTML

<div id='clickme'>+</div>
<div id='imagediv' class='imagediv'></div>

CSS

#clickme {
  width: 50px;
  margin: 10px auto 10px auto;
  background-color: blue;
  color: white;
  font-size: 48px;
  text-align: center;
}
.imagediv {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background-color: red;
    border-radius: 10px;
}

JS

globalsize = 1;
$('#clickme').click(function(){
  if (globalsize == 1)
    {
     $('#imagediv').css( 'width', '200px' );
     $('#clickme').text( '-' );
     globalsize = 2;
     } else {
     $('#imagediv').css( 'width', '100px' );
     $('#clickme').text( '+' );         
     globalsize = 1;
  }
});
0
TimSPQR 1 Dez. 2013 im 12:34

Sie können die jQuery-Benutzeroberfläche und die dazugehörigen Schaltflächen verwenden (siehe jsFiddle http://jsfiddle.net/zd57W/5) /)

<div class="expandContent ui-icon ui-icon-zoomin"></div>
<div class="showMe" style="display:none">This content was hidden, but now shows up</div>


$('.expandContent').click(function(){
        $('.showMe').slideToggle('slow');
         $(this).toggleClass('ui-icon-zoomin ui-icon-zoomout')
    });

Grüße Hendrik

0
H. Lemelson 1 Dez. 2013 im 12:37

Versuchen:

$('.expandContent').click(function () {
     $('.showMe').slideToggle('slow');
     $('#arrow').toggleClass('plus minus');
 });

CSS:

#arrow{display:block;height:9px;width:9px;}
.plus{background:url(http://s13.postimg.org/myy6y2uxv/plus.png);}
.minus{background:url(http://s13.postimg.org/myy6y2uxv/plus.png);}

Geige hier.

0
Hiral 1 Dez. 2013 im 12:30

Versuchen Sie diese Geige:

http://jsfiddle.net/zd57W/2/

    $("#one,#two").on("click", function(){
        $("#one,#two").slideToggle();
        $('.showMe').slideToggle('slow');
    });
0
Zword 1 Dez. 2013 im 12:25