Dilettante_Pro,
лучше менять текст на одной ссылке и slideToggle() как по ссылке. |
Цитата:
<script type="text/javascript"> $(document).ready(function(){ $('#getContent').click(function(){ $(this).toggleClass('opened').toggleClass('closed').next().slideToggle(); if($(this).hasClass('opened')) { $(this).html('Скрыть'); $.ajax({ url: "/katprod/", type: "GET", cache: false, beforeSend: function() { $('#divContent').html('Получаем контент'); }, success: function(html){ $("#divContent").html(html); } }); } else { $(this).html('Развернуть'); } return false; }); }); </script> <div class="col-md-12 col-sm-12 col-xs-12"><a href="#" id="getContent">Развернуть</a></div> <div class="col-md-12 col-sm-12 col-xs-12" id="divContent"></div> Теперь надо скрыть контент при повторном нажатии Попробовал сделать так: else { $(this).html('Развернуть'); $("#divContent").remove(); } Но тогда второй раз контент не загружаеться |
Указал класс дива, из загруженного контента и все получилось
else { $(this).html('Развернуть'); $(".category").remove(); } Если код не корректный просьба указать на ошибки. Спасибо! |
max1985, почитайте о псевдоселкторах, через которые можно прописать тексты на кнопке. Останется скриптом менять состояние элемента slideToggle() и переключать класс кнопки toggleClass().
|
кнопка получаем контент load ajax jquery
max1985,
$(function() { var btn = $("#getContent"), div = $("#divContent"), title = ["Развернуть", "Скрыть", "Получаем контент"]; btn.on("click", function(event) { event.preventDefault(); var text = div.text().trim(); if (text) { text = title[+div.is(":hidden")]; div.slideToggle(300); btn.text(text) } else if (text != title[2]) { div.text(title[2]); $.ajax({ url: "/katprod/", type: "GET", cache: false, success: function(html) { div.html(html); btn.text(title[1]); } }) } }) }); |
Спасибо рони все работает как надо! Единственное не могу присвоить иконку для кнопки закрыть в виде <i class="fa fa-chevron-up" aria-hidden="true"></i>
|
max1985,
$(function() { var btn = $("#getContent"), div = $("#divContent"), title = ["Развернуть", "Скрыть ", "Получаем контент"]; btn.on("click", function(event) { event.preventDefault(); var text = div.text().trim(); if (text) { var hidden = div.is(":hidden") text = title[+hidden]; div.slideToggle(300); btn.text(text); hidden && btn.append('<i class="fa fa-chevron-up" aria-hidden="true"></i>') } else if (text != title[2]) { div.text(title[2]); $.ajax({ url: "/katprod/", type: "GET", cache: false, success: function(html) { div.html(html); btn.text(title[1]).append('<i class="fa fa-chevron-up" aria-hidden="true"></i>'); } }) } }) }); |
Спасибо рони, немного подправил, вот так вообще в идеале:
<script type="text/javascript"> $(function() { var btn = $("#getContent"), div = $("#divContent"), title = ["Развернуть", "Скрыть ", "Получаем контент"]; btn.on("click", function(event) { event.preventDefault(); var text = div.text().trim(); if (text) { var hidden = div.is(":hidden") text = title[+hidden]; div.slideToggle(300); btn.text(text).append(' <i class="fa fa-chevron-down" aria-hidden="true"></i></a>'); } else if (text != title[2]) { div.text(title[2]); $.ajax({ url: "/katprod/", type: "GET", cache: false, success: function(html) { div.html(html); btn.text(title[1]).append(' <i class="fa fa-chevron-up" aria-hidden="true"></i>'); } }) } }) }); </script> <div class="col-md-12 col-sm-12 hidden-xs"><span class="opener"><a href="#" id="getContent">Развернуть <i class="fa fa-chevron-down" aria-hidden="true"></i></a></span></div> <div class="row"><div class="col-md-12 col-sm-12 .hidden-xs" id="divContent"></div></div> |
Часовой пояс GMT +3, время: 09:19. |