javascriptphpjqueryonclicktoggleclass

Jquery Find Active Class And Replace that class

enter image description here

From the above image currently 1st View Details is clicked so it is showing as Hide Details.

if i click on 3 rd View Details all 1st one or(Active one) has to be relaced to view details how can i do that..?

Here what i have tried:

Hide Details:

$("#tbodyid" ).on( "click", ".hide-details", function() {
$("#participantsForGd").hide();
var field = $(this);
field.text("View Details");
field.addClass("view-details");
field.removeClass("hide-details");
});

View-datails

$("#tbodyid" ).on( "click", ".view-details", function() {
$("#participantsForGd").show();
var field = $(this);
field.text("Hide Details");
field.addClass("hide-details");
field.removeClass("view-details");
});

My html:

<?php while($grpData = $grpQuery->fetch_assoc()){ ?>
<tr>
<td>
<span id="<?php echo $grpData['group_id'];?>" class="view-details">View Details</span>
</td>
</tr>
<?php } ?>

This one has to work like toggle:

<form id="participantsForGd" >BLAH BLAH </form>
Solution

  • Your html structure is not good to do this task easily. I am showing how you perform this task. Then you can modify as your need.

    HTML:

    <button class='details-btn hide-details'>Hide Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>
<button class='details-btn view-details'>View Details</button>

    JQuery:

    $('.details-btn').click(function(){
    $('.details-btn').each(function(){
        $(this).removeClass('hide-details').addClass('view-details').text('View Details');
    });
    $(this).removeClass('view-details').addClass('hide-details').text('Hide Details');
})