Question

I have a image with 2 buttons:

<div class="panel">
    <div>
        <a class="a-button>Toggle A</a>
        <a class="b-button>Toggle B</a>
    </div>
    <p id="statics">Statics numbers</p>
   <p id='chart">Chart</p>
</div>
<div class="item-img"><img src="..."></div>

If I want to view #statics, I click a-button to hide item-img. Then, click again to show img and hide #statics.

If I want to view #chart, I click b-button to hide item-img, then, click again to show item-img and hide #chart.

jQuery(document).ready( function($) {
    $(".a-button").click(function () {
        $("#statics").toggle("slow");
        $(".item-img").toggle('slow');
        });
    $(".b-button").click(function () {
        $("#chart").toggle("slow");
        $(".item-img").toggle('slow');
        });
});

The problem is– If I hide item-img by either toggler a-button or b-button, Then, click the other toggler(a or b) before click the first toggler to show the item -img again, Both #statics and #chart show up, make a big mess.

How can I disable one toggler when another toggler is not toggle back yet?

Answer 1

jQuery(document).ready( function($) {
    $(".a-button").click(function () {
        if(!$("#chart").is(':visible')) {
            $("#statics").toggle("slow");
            $(".item-img").toggle('slow');
        }
        });
    $(".b-button").click(function () {
        if(!$("#statics").is(':visible')) {
            $("#chart").toggle("slow");
            $(".item-img").toggle('slow');
        }
        });
});

Working Fiddle