CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arnie C
Arnie C

Reputation: 11

JQuery - using 'this' to show and hide DIVs with one function

I have Googled on this and not been able to suss it out. I'm somewhat experienced with jQuery but rusty.

My goal is to display a grid of images. When an image is clicked, a hidden DIV will slide out and show text (Episode names and HTML5 audio player). Only one episode list should be shown at one time.

Here's my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="scripts/jquery-3.3.1.min.js"></script>
<Title>Now Playing 10th Anniversary Set Disc 1 - 2013</Title>
<meta charset="UTF-8">
</head>
<style>
div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; padding: 15px;}
div.td {border: 1px solid black; display: table-cell;  padding: 15px;  vertical-align: middle;}

 

.EpisodeList {
    display: none;
}</style>

<script>
$(document).ready(function() {
     $('#AvengersID').click(function() {
          $('#Avengers').animate({
               height: 'toggle'
               }, 2000
          );
     });
	 $('#CarrieID').click(function() { 
          $('#Carrie').animate({
               height: 'toggle'
               }, 2000
          );
     });
});
</script>


<Body>
<center><Img src="images/NP-logo2016-10yrBug.png" border = 0><BR>
<H2>Disc 1 - 2013</H2><P>(click on any logo to see and play the podcasts in that series released in 2013)</center>
<P>
 
 
<div class ="table">
	<div class ="tr">
		<div class = "td">
			<Center><a id="AvengersID" href="javascript:showonlyone('Avengers');"><img src = "images/NP_ComicSeries_Avengers-Art-V2_300-2.jpg" width = "200"><BR>Avengers</center></a>
			<div class="EpisodeList"  id="Avengers">
				<div class ="table">
					<div class="tr">
						<div class="td"><center>Iron Man 3 - May 7, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPAVENGERS07.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPAVENGERS07.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Thor: The Dark World - Nov 12, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPAVENGERS08.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPAVENGERS08.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class = "td">
			<Center><a id="CarrieID" href="javascript:showonlyone('Carrie');"><img src = "images/NP_SKingSeries-Carrie-Art_300v02.jpg" width = "200"><BR>Carrie</center></a>
			<div class="EpisodeList"  id="Carrie">
				<div class ="table">
					<div class="tr">
						<div class="td"><center>Carrie (1976) - October 1, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPCARRIE01.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE01.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>The Rage: Carrie 2 - October 8, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPCARRIE02.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE02.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Carrie (2002) - October 15, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPCARRIE03.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE03.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Carrie (2013) - October 21, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPCARRIE04.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE04.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
<html>

The two issues I'm having:

1) How can I use a single function to show and hide all DIVs so I don't have code repeated for every single image the way I currently have $('#AvengersID').click and $('#CarrieID').click

2) How can I hide all DIVs with the class EpisodeList? I've tried $('EpisodeList').hide(); but it's not actually doing anything.

Upvotes: 0

Views: 61

Answers (2)

Sphinx
Sphinx

Reputation: 10729

It seems you used wrong selector.

For all div, you can use $('div')

For the div with specific class, you can use $('div.your-class')

You can look into JQuery Selector

And below sample use .toggle() to show/hide elements. For more details on this API, check .toggle()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="scripts/jquery-3.3.1.min.js"></script>
<Title>Now Playing 10th Anniversary Set Disc 1 - 2013</Title>
<meta charset="UTF-8">
</head>
<style>
div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; padding: 15px;}
div.td {border: 1px solid black; display: table-cell;  padding: 15px;  vertical-align: middle;}

 

.EpisodeList {
    display: none;
}</style>

<script>
$(document).ready(function() {
     $('#AvengersID').click(function() {
          $('#Avengers').animate({
               height: 'toggle'
               }, 2000
          );
     });
	 $('#CarrieID').click(function() { 
          $('#Carrie').animate({
               height: 'toggle'
               }, 2000
          );
     });
});
function toggleAllDiv(){
  $('div').toggle();
}
function toggleEpisodeListDiv(){
  $('div.EpisodeList').toggle();
}
</script>


<Body>
<center><Img src="images/NP-logo2016-10yrBug.png" border = 0/><BR/>
<H2>Disc 1 - 2013</H2><P>(click on any logo to see and play the podcasts in that series released in 2013)</p></center>

<center>
<button onclick="toggleAllDiv()">Toggle All</button>
<button onclick="toggleEpisodeListDiv()">Toggle EpisodeList</button>
</center>
 
 
<div class ="table">
	<div class ="tr">
		<div class = "td">
			<Center><a id="AvengersID" href="javascript:showonlyone('Avengers');"><img src = "images/NP_ComicSeries_Avengers-Art-V2_300-2.jpg" width = "200"><BR>Avengers</center></a>
			<div class="EpisodeList"  id="Avengers">
				<div class ="table">
					<div class="tr">
						<div class="td"><center>Iron Man 3 - May 7, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPAVENGERS07.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPAVENGERS07.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Thor: The Dark World - Nov 12, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPAVENGERS08.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPAVENGERS08.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class = "td">
			<Center><a id="CarrieID" href="javascript:showonlyone('Carrie');"><img src = "images/NP_SKingSeries-Carrie-Art_300v02.jpg" width = "200"><BR>Carrie</center></a>
			<div class="EpisodeList"  id="Carrie">
				<div class ="table">
					<div class="tr">
						<div class="td"><center>Carrie (1976) - October 1, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPCARRIE01.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE01.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>The Rage: Carrie 2 - October 8, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPCARRIE02.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE02.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Carrie (2002) - October 15, 2013 </center>
						</div>
					</div>
					<div class="tr">
						<div class="td">
							<audio controls> <source src="Podcasts/NPPCARRIE03.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE03.MP3">Play Now</a>
								<BR>
							</audio>
						</div>
					</div>
					<div class="tr">
						<div class="td"><center>Carrie (2013) - October 21, 2013</center></div>
					</div>
					<div class="tr">
						<div class = "td">

							<audio controls> 
								<source src="Podcasts/NPPCARRIE04.MP3" type="audio/mpeg">
								<A HREF = "Podcasts/NPPCARRIE04.MP3">Play Now</a> 
							</audio>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>
<html>

Upvotes: 1

Seann
Seann

Reputation: 91

This should do the trick, firstly you were missing the '.' inside $('EpisodeList'), it should've been $('.EpisodeList')

and this should work individually for each .table > .tr > .td

$(document).ready(function() {
  $('.table .tr .td').click(function(){
    $('.EpisodeList').hide();
    $('#' + $(this).attr('id').replace('ID', '')).animate({
         height: 'toggle'
         }, 2000
    );
  });
});

Upvotes: 0

Related Questions