Как установить Open и Close конкретного блока div только с использованием Javascript?

Question

Пожалуйста, проверьте эту ссылку https://jsfiddle.net/bhargavjoshi/sL8f6bkr/3/

Я пытаюсь настроить Откройте блок, нажав продолжить чтение и закрыв блок, нажав Показать меньше.

теперь он нормально работает нормально, ноВопрос в том, когда я открываю два блока, например. Точки 1 и 2 открыты, и если я щелкаю «показать меньше точки № 1», то он закроет первый блок, но также изменит статус «показать меньше», чтобы продолжить чтение блока 2.

, так как я могу установить это с помощьюЕсли щелкнуть «показать меньше», он закроет только конкретный блок.

Спасибо заранеепожалуйста, помогите в этом вопросе

jQuery(".show-slide-wrp").on("click", function(event){
    event.preventDefault();
    var slidindWrp = jQuery(this).data("slide");
    console.log(slidindWrp);
    jQuery(slidindWrp).slideDown();
    jQuery(this).hide();
});


jQuery(".hide-slide-wrp").on("click", function(event){
    event.preventDefault();
    var $this = jQuery(this);
    var closeDiv = $this.closest(".sliding-wrp");
    jQuery(".show-slide-wrp").show();
    closeDiv.slideUp();
    jQuery('html, body').animate({
        scrollTop: closeDiv.offset().top - 300
    }, 500);

});

// scoll by id
jQuery(".contenttable a").click(function(event) {
    event.preventDefault();
    var $this = jQuery(this);
    var getScrollId = $this.attr("href");  
    console.log(getScrollId);
   jQuery('html, body').animate({
        scrollTop: jQuery(getScrollId).offset().top
    }, 500);
});

Answer 1

Проблема здесь:

    jQuery(".hide-slide-wrp").on("click", function(event){
    event.preventDefault();
    var $this = jQuery(this);
    var closeDiv = $this.closest(".sliding-wrp");
    jQuery(".show-slide-wrp").show(); // You show all "Keep reading" occurences
    closeDiv.slideUp();
    jQuery('html, body').animate({
        scrollTop: closeDiv.offset().top - 300
    }, 500);

});
//you could put a data-target on theses elements :
<div class="hide-slide-wrp" data-target=".sliding7"><a>Show less</a></div>

отредактировано: я сделал ручку: чтобы не добавлять вручную атрибуты в ваш html как цель данных, так как ваша страница выглядит как статический html, я добавляюdata-target для ссылки «показать меньше», когда пользователь нажимает на ссылку «продолжать чтение». затем, когда я нажимаю на ссылку «Показать меньше», я знаю, какую ссылку «читать дальше», чтобы скрыть, вы понимаете, о чем я?

Первое: когда вы нажимаете «Продолжить чтение», добавьте атрибут цели данныхк правому закрывающему тегу:

 var $closingTag = $(this).closest(".benefixbox").find(".hide-slide-wrp");

Второе: при нажатии на закрывающий тег: скрыть тег «Продолжить чтение»:

var dataTarget = $(this).data("target");// here is my target : keep reading
    jQuery("[data-slide='"+dataTarget+"']").show(); // we show the link keep reading again because we know what its data-slide is