CODEWITHSUNDEEP
javascripthtmljquerycss
Lucy
Lucy

Reputation: 9

Change p tag text when class is added to a separate div

I needed three panels to show or hide some of its content based on whether or not a button (p tag) was clicked, and then change the button text when it was clicked to say hide or show depending on the situation. However the hidden content is meant to be auto hidden on mobile devices so I've added some javascript to do this but now the button text change is messed up since its triggering on click. What I would like instead is to have the button text change if the 'clicked-hide' class is added and revert back if it's not. Help would be appreciated :)

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---------------

Upvotes: 0

Views: 203

Answers (1)

Oak
Oak

Reputation: 352

First of all i suggest you set .compare-card-attributes to hidden on mobile with CSS

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

and also have a class of something along the lines of

.hidden {
  visibility: hidden;
}

then your script will need to be (assuming these jquery methods are already working)

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

I have written that blindly, so i hope that works / helps.

I suggest you use a more semantic element for your toggle too, like a button or div with a 'role=button' attribute.

Upvotes: 1

Related Questions