Steggie Steggie - 3 months ago 8
jQuery Question

Only show button-A when button-B is displayed

I'm trying to use jQuery to show a button when an other button is displayed. But I'm not that of a jQuery expert. So I was wondering if there would be anyone that could help me with this one?

I have 2 buttons:


  • Button
    ent-step

  • Button
    del-step



What I want to do is to only show button
ent-step
when button
del-step
is on screen. Normally this button
del-step
is hidden with this JavaScript:

function showDellocation($this) {
var dataLocation = $this.attr("data-location");
$(".del-step[data-location='" + dataLocation + "']").show();
$(".add-step[data-location='" + dataLocation + "']").addClass( "blur" );
}
function hideDellocation($this) {
var dataLocation = $this.attr("data-location");
$this.hide();
$(".add-step[data-location='" + dataLocation + "']").removeClass("blur");
}


The button
ent-step
is in an other PHP file called by Ajax:

<table class="item-buttons">
<tr>
<td style="width:150px;">&nbsp;</td>
<td style="width:150px;">
<a href="example.com/step" value="Ent">
<button class="ent-step">Entertainment&nbsp;
<i class="fa fa-angle-double-right" aria-hidden="true">/i>
</button>
</a>
</td>
</tr>
</table>


Can I use the
blur
class to activate this option? For instance:

jQuery(document).ready(function($) {
if ($(this).hasClass('blur')) {
$('.ent-step').addClass('clickable');
}


And then style the button using CSS?
Or is this not the correct way to do this?

Answer

You can show hide the button based on class of .add-step

if ($('.add-step').hasClass('blur')) {
    $('.ent-step').show();
}

And when you are hiding the .add-step hide the .ent-step button as well

function hideDellocation($this) {
   var dataLocation = $this.attr("data-location");
   $this.hide();
   $(".add-step[data-location='" + dataLocation + "']").removeClass("blur");
   $('.ent-step').hide();
} 
Comments