CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
GoldenGonaz
GoldenGonaz

Reputation: 1166

Stop tabbed element closing on second click

I have snippet of code that opens tabs, however I would like 1 tab to always remain open.

How can I disable the second click on the tab button already open stopping the tab from closing?

So referring to the fiddle, if you click 'Button 1' once, it will show the corresponding tab, but if you click 'Button 1' again it shouldn't close the corresponding tab. Only clicking 'Button 2' will close it also opening it's own tab.

Fiddle

JS

$(document).ready(function() {
  $(".tone").click(function(e) {
    e.preventDefault();  
    var tab = $(this).attr("id");
    $(".tone__pack").not(tab).css("display", "none");
    $(tab).toggle();
  });
});

HTML

<div class="tone" id="#tone1">
  Button 1
</div>
<div class="tone__pack" id="tone1">

</div>
<div class="tone" id="#tone2">
  Button 2
</div>
<div class="tone__pack" id="tone2">

</div>

CSS

.tone {
  display: block;
  background: blue;
  width: 100px;
  text-align: center;
  color: #fff;
}

.tone__pack {
  display: none;
  width: 100px;
  height: 100px;
  background: red;
}

Upvotes: 3

Views: 353

Answers (3)

Sarin Jacob Sunny
Sarin Jacob Sunny

Reputation: 2138

I modified your code like this,

When the tab is opened, I will add one class to identify that it is already opened.

when again a click event is detected, if it already contains the class, the will not do anything,else I will do as required.

   $(document).ready(function() {
      $(".tone").click(function(e) {
        e.preventDefault();
        var tab = $(this).attr("id");
        $(".tone__pack").not(tab).css("display", "none");

        // removing class, if it is present in any other tab
        $(".tone__pack").not(tab).removeClass("active");

        //if it is already opened, then return
        if($(tab).hasClass("active")){
            return;
        }
        //add identifier for next iterations
        $(tab).addClass("active");

        $(tab).toggle();
      });
    });

Upvotes: 2

Itay Ganor
Itay Ganor

Reputation: 4205

Toggle it only when its pack is hidden, like so:

    $(document).ready(function() {
        $(".tone").click(function(e) {
            e.preventDefault();
            var tab = $(this).attr("id");
            if($(".tone__pack"+tab).is(":hidden")) {
                $(".tone__pack").not(tab).css("display", "none");
                $(tab).toggle();
            }
        });
    });
.tone {
    display: block;
    background: blue;
    width: 100px;
    text-align: center;
    color: #fff;
}

.tone__pack {
    display: none;
    width: 100px;
    height: 100px;
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
    Button 1
</div>
<div class="tone__pack" id="tone1">

</div>
<div class="tone" id="#tone2">
    Button 2
</div>
<div class="tone__pack" id="tone2">

</div>

Upvotes: 2

sol
sol

Reputation: 22949

You can use .show() instead of toggle.

fiddle

$(document).ready(function() {
  $(".tone").click(function(e) {
    e.preventDefault();
    var tab = $(this).attr("id");
    $(".tone__pack").not(tab).css("display", "none");
    $(tab).show();
  });
});
.tone {
  display: block;
  background: blue;
  width: 100px;
  text-align: center;
  color: #fff;
}

.tone__pack {
  display: none;
  width: 100px;
  height: 100px;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tone" id="#tone1">
  Button 1
</div>
<div class="tone__pack" id="tone1">

</div>
<div class="tone" id="#tone2">
  Button 2
</div>
<div class="tone__pack" id="tone2">

</div>

Upvotes: 4

Related Questions