CODEWITHSUNDEEP
jqueryhtmlcss
user2063635
user2063635

Reputation: 214

event handler to work only on current div element and trigger its associated sub element

I have div within another div as below. Also mentioned the jquery and css code below. 

$(document).ready(function(){
	$("#banner_animate").click(function () {
		$(this).toggleClass('maximized');
		/*$("div#hide").toggleClass('show');*/
		$('#banner_animate>div#hide').toggleClass('show');
	});
	
});
#banner_animate.maximized {
    height:75px;
    transition: height 0s linear;
    border:1px solid black;
    padding:10px;
    width:300px;
}
#banner_animate {
    height:20px;
	transition: height 0s linear;
    border:1px solid black;
    padding:10px;
    width:300px;
	float: right;
}
#hide{
    visibility: hidden;
}
#hide.show {
    visibility: visible;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">first </font>

<div id=hide>
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a> 
</div>
</div>

<div id="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">second </font>

<div id="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a> 
</div>
</div>

My intention is on clicking first, the box should expand and the associated text (more description goes here...) should display. The same should be applicable on clicking second.

Current output- clicking on "first", maximizes the box and prints the associated text (sub element-div) in both "first" and "second". "Second" is not clickable.

Any suggestions?

Upvotes: 0

Views: 50

Answers (3)

DoctorDestructo
DoctorDestructo

Reputation: 4362

Here is a working version of your code (see below for an explanation):

$(document).ready(function(){
	$(".banner_animate").click(function () {
		$(this).toggleClass('maximized');
	});
});
.banner_animate.maximized {
    height:75px;
    transition: height 0s linear;
    border:1px solid black;
    padding:10px;
    width:300px;
}
.banner_animate {
    height:20px;
	transition: height 0s linear;
    border:1px solid black;
    padding:10px;
    width:300px;
	float: right;
}
.hide{
    visibility: hidden;
}
.banner_animate.maximized > .hide {
    visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">first </font>

<div class="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a> 
</div>
</div>

<div class="banner_animate" style="background:#F2F2F6"><font face ="Times New Roman" size="4">second </font>

<div class="hide">
more description goes here <br>
<a href="http://www.abcd.com">Read more!</a> 
</div>
</div>

What I did was:

  1. replaced all of the ID attributes with class attributes, since you're not supposed to use the same ID on more than one element;
  2. made the .maximized class set the hidden div to visible, which eliminates the need for a .show class;
  3. removed the JavaScript code that sets the .show class, since it's no longer needed.

Upvotes: 0

Sukrit
Sukrit

Reputation: 318

First of all you shouldn't have 2 ID's in the same DOM. But if you want them to be the same you can change them to a class. (Do this for both banner_animate and hide)

Also, what you're doing is toggling both the hides so you need a selector which tell's it exactly which one to toggle.

jsFiddle: https://jsfiddle.net/80cy6q2c/

Upvotes: 0

danielaKay
danielaKay

Reputation: 189

Both of your banners have the same ID banner_animate. Change one of them.

Edited for more verbosity: the line $('#banner_animate>div#hide').toggleClass('show'); applies to all elements with the id banner_animate, so both of your banners get opened.

This is precisely the reason why IDs are supposed to be unique on a page.

Upvotes: 1

Related Questions