Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Загрузить содержимое файла php при нажатии на ссылку (https://javascript.ru/forum/jquery/74355-zagruzit-soderzhimoe-fajjla-php-pri-nazhatii-na-ssylku.html)

laimas 04.07.2018 10:33

Dilettante_Pro,
лучше менять текст на одной ссылке и slideToggle() как по ссылке.

max1985 04.07.2018 10:37

Цитата:

Сообщение от laimas (Сообщение 488975)
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();
    }

Но тогда второй раз контент не загружаеться

max1985 04.07.2018 10:55

Указал класс дива, из загруженного контента и все получилось
else {
        $(this).html('Развернуть');
		$(".category").remove();
    }

Если код не корректный просьба указать на ошибки. Спасибо!

laimas 04.07.2018 11:34

max1985, почитайте о псевдоселкторах, через которые можно прописать тексты на кнопке. Останется скриптом менять состояние элемента slideToggle() и переключать класс кнопки toggleClass().

рони 04.07.2018 12:15

кнопка получаем контент 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]);
                }
            })
        }
    })
});

max1985 04.07.2018 13:00

Спасибо рони все работает как надо! Единственное не могу присвоить иконку для кнопки закрыть в виде <i class="fa fa-chevron-up" aria-hidden="true"></i>

рони 04.07.2018 14:36

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

max1985 04.07.2018 15:03

Спасибо рони, немного подправил, вот так вообще в идеале:
<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.