как изменить изображение кнопки, которая вызывает свернуть / развернуть div

0

как изменить кнопку изображения, что приводит к тому, что div сбрасывается/расширяется.

например, нажатие "+" будет расширяться. При расширении "+" становится "-". Опять же, нажатие на "-" приведет к смене div, а также снова появится "+".

Вот скрипка

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>

ЯШ:

 $('.expandContent').click(function(){
    $('.showMe').slideToggle('slow');
});
Теги:

5 ответов

2
Лучший ответ

fiddle 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()

.prop()

.является()

: видимый

Поделиться
  • 1
    спасибо, все было нормально, слаженно работало
  • 0
    @AbhishekSen Добро пожаловать, рады помочь.
0

Попробуйте эту скрипку:

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

    $("#one,#two").on("click", function(){
        $("#one,#two").slideToggle();
        $('.showMe').slideToggle('slow');
    });
Поделиться
  • 0
    Спасибо вам всем. Должно быть, я спросил раньше, тогда это могло бы спасти меня за последние 3 часа! Извините, мне не разрешили комментировать до 2 часов из-за низкой репутации. еще раз очень очень спасибо!
0

ЗДЕСЬ - скрипка.

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

Пытаться:

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

Заклинай здесь.

Поделиться
  • 0
    спасибо, очень коротко и компактно
  • 0
    @AbhishekSen, пожалуйста! :)
0

вы можете использовать jQueryUI и кнопки, которые идут с ним (см. jFiddle 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')
    });

С уважением Хендрик

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню