CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mahishan Ranasinghe
Mahishan Ranasinghe

Reputation: 51

Jquery Enable button on click div and show corresponding item

I have three main divs and disabled button. When on click the Div1 It will show two more divs. (Div4, Div5) I need to enable the button whenever on click the Div2, Div3, Div4 and Div5.

FIDDLE LINK

$(document).ready(function() {
  $('.row .item').click(function() {
    $('.row').find('.item').removeClass('selected');
    $(this).addClass('selected');

    if ($(".item-expand").hasClass("selected")) {
      $(".sub-item-container").removeClass('d-none');
    } else {
      $(".sub-item-container").addClass('d-none');
    }
  });

  $('.sub-item-container .sub-item').click(function() {
    $('.sub-item-container').find('.sub-item').removeClass('selected');
    $(this).addClass('selected');

  });
});
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: #fff;
  margin: 0 20px;
  cursor: pointer;
}

.sub-item {
  width: 100px;
  height: 100px;
  background-color: green;
  color: #fff;
  margin: 0 20px;
  cursor: pointer;
}

.row {
  margin-bottom: 20px;
}

.selected {
  background-color: red;
  border: 3px solid #000;
}

.showitem {
  background-color: yellow;
  padding: 20px;
  margin: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 item item-expand">
      Div 1
    </div>

    <div class="col-md-4 item">
      Div 2
    </div>

    <div class="col-md-4 item">
      Div 3
    </div>
  </div>

  <div class="sub-item-container row d-none">
    <div class="col-md-4 sub-item">
      Div 4
    </div>

    <div class="col-md-4 sub-item">
      Div 5
    </div>
  </div>

  <button class="btn btn-primary" disable>Click</button>


  <div class="row mt-5">
    <div class="showitem div2">
      Show this div when Div 2 is selected and button clicked.
    </div>

    <div class="showitem div3">
      Show this div when Div 3 is selected and button clicked.
    </div>

    <div class="showitem div4">
      Show this div when Div 4 is selected and button clicked.
    </div>

    <div class="showitem div5">
      Show this div when Div 5 is selected and button clicked.
    </div>
  </div>
</div>

image

And once one of the divs (div2, div3, div4 or div5) are selected and on click of the button I want to show the corresponding div.

Image

Upvotes: 1

Views: 342

Answers (1)

Void Spirit
Void Spirit

Reputation: 909

Follow this fiddle. You can store class name of elements in data attribute or however you can call it. And manipulate with elements with that class

$("button").click(function(){
    var item = $(".selected").attr("data");
    $(".showitem").hide();
    $("."+item).show();
})

Upvotes: 1

Related Questions