CODEWITHSUNDEEP
javascriptjqueryhtml
hansi silva
hansi silva

Reputation: 99

How to make a div hide when having same set of classes?

I have two set of div containers with input tags with same classes to both. only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.

Please check my div containers below. please advice how to proceed this Ex: 

<!--- here is 1st div container which input box is selected-->
    <div class="block">
    <div class="frame frame-focus">
    <input name="set1">
    <div class="panel-set"></div>
    </div>
    </div>

<!-- here is 2nd div -->
    <div class="block">
    <div class="frame">
    <input name="set1">
    <div class="panel-set"></div>
    </div>
    </div>

Upvotes: 0

Views: 43

Answers (2)

Raj
Raj

Reputation: 2028

html

    <div class="block">
    <div class="frame frame-focus">
    <input name="set1">
    <div class="panel-set">1</div>
    </div>
    </div>

<!-- here is 2nd div -->
    <div class="block">
    <div class="frame">
    <input name="set1">
    <div class="panel-set">2</div>
    </div>
    </div>

jquery

$(document).ready(function(){

$("input").click(function() {
  $(this).siblings('.panel-set').hide();
});

});

Example jsfiddle

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191936

Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:

.frame-focus > .panel-set {
  display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
  <div class="frame frame-focus">
    <input name="set1">
    <div class="panel-set">1</div>
  </div>
</div>

<!-- here is 2nd div -->
<div class="block">
  <div class="frame">
    <input name="set1">
    <div class="panel-set">2</div>
  </div>
</div>

Upvotes: 1

Related Questions