Блог

Мне понадобились три панели, чтобы показать или скрыть часть его содержимого в зависимости от того, была ли нажата кнопка (тег p), а затем изменить текст кнопки при нажатии, чтобы сказать скрыть или показать в зависимости от ситуации. Однако скрытое содержимое должно быть автоматически скрыто на мобильных устройствах, поэтому я добавил для этого некоторый javascript, но теперь изменение текста кнопки происходит неправильно с момента его срабатывания при нажатии. Вместо этого я хотел бы, чтобы текст кнопки менялся, если добавлен класс ‘clicked-hide’, и возвращался обратно, если это не так. Помощь была бы признательна 🙂

HTML

     <div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
  

Javascript

     //COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
    jQuery('.compare-card-attributes').toggleClass('clicked-hide');
 });

//This will toggle the text on the show hide p tag button messaging
 jQuery(document).ready(function($) {
    $('.compare-card-footer').find(".hide-show-attributes").click(function(){;
        if($(this).find("span.toggleShow").first().text()=="Hide Details"){
            $("span.toggleShow").text("Show Details");
        }
        else {
            $("span.toggleShow").text("Hide Details");
        }
    });
});

//Mobile Switch - this will auto collapse the panel when the user is on mobile
if($(window).width()<600){
    $(".compare-card-attributes").addClass("clicked-hide");
    $('span.toggleShow').text('Show Details');
} 
else {
    $(".compare-card-attributes").removeClass("clicked-hide");
}
// this is used whenever the window is resized
$(window).resize(function(){
  if($(window).width()<600){
        $(".compare-card-attributes").addClass("clicked-hide");
    } 
    else {
        $(".compare-card-attributes").removeClass("clicked-hide");
    }
});

//END COMPARISON CARD SCRIPT---------------
  

Прежде всего, я предлагаю вам установить .compare-card-attributes как скрытые на мобильных устройствах с помощью CSS

 @media only screen and (max-width: 600px) {
  .compare-card-attributes {
    visibility: hidden;
  }
}
  

а также иметь класс чего-то вроде

 .hidden {
  visibility: hidden;
}
  

тогда ваш скрипт должен быть (при условии, что эти методы jquery уже работают)

 jQuery('.hide-show-attributes').on('click', function() {

    const cardAttributes = $('.compare-card-attributes');

    const toggleText = $(this).find("span.toggleShow").first();

    cardAttributes.toggleClass('hidden');


    if(cardAttributes.hasClass("hidden")){
        toggleText.text("Show Details");
    }
    else {
        toggleText.text("Hide Details");
    }
 });
  

Я написал это вслепую, поэтому надеюсь, что это сработает / поможет.

Я предлагаю вам также использовать более семантический элемент для вашего переключателя, например, button или div с атрибутом ‘role = button’.