How can I display a div on button click?

Question

jwmollman 0 Light Poster

16 Years Ago

I'm trying to create a simple gallery for comics I have created. I have a main divider, which contains two tables. The first table is for navigation, which contains a drop-down menu with a button. The second table is for content.

When the user chooses on option in the drop-down menu and clicks the button, I want the second table to appear. Then when he chooses another option and clicks the button, I want the table to change to the next comic and appear.

I hope I'm making sense here. Here's the code I currently have. Am I going to need Javascript for this?

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Webcomics by John Mollman</title>
		<link rel="icon" type="image/x-icon" href="" />
		<link rel="shortcut icon" type="image/x-icon" href="" />
		<link rel="stylesheet" type="text/css" href="styles/webcomics.css" />
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Webcomics by John Mollman" />
		<meta name="keywords" content="mrmollman, mollman, mr, artwork, art, john,
				comics, webcomics, cartoons, john mollman" lang="en-us" />
		
		<!--
			Website written and designed by John Mollman
			All graphics/images created by John Mollman
			email: jw.mollman@gmail.com
			
		-->
	</head>

	<body>
		<br />
		<div id="wrapper">
			<center>
				<table width="650px" cellspacing="0" cellpadding="0" class="selector">
					<tr>
						<td style="color: #fff; background-color: #ff9a00; text-align: center;">
							<strong>Webcomics by John Mollman</strong>
						</td>
					</tr>
					<tr>
						<td style="padding: 5px; border: 1px solid #ff9a00;">
							<center>
								<table>
									<tr>
										<td>
											<center>
												<br />
												<form action="" method="get" name="frmComics">
													<select name="selComics">
														<option value="choose">choose one...</option>
														<option disabled="disabled" value=""></option>
														<option value="Condo">Condo Mints</option>
														<option value="Craigslist">The Craigslist Deal</option>
														<option value="Zombie">The Zombie & The Human</option>
														<option value="Beauty">Beauty Cuts Deep</option>
														<option value="Dumb">The Dumb Neighbor</option>
													</select>
													<input type="submit" value="view" /><br />
												</form>
												<br />
											</center>
										</td>
									</tr>
								</table>
							</center>
						</td>
					</tr>
				</table><br />
				
				<table width="650px" cellspacing="0" cellpadding="0">
					<tr>
						<td style="color: #fff; background-color: #ff9a00; text-align: center;">
							<b>Beauty Cuts Deep by John Mollman</b>
						</td>
					</tr>
					<tr>
						<td style="padding: 5px; border: 1px solid #ff9a00;">
							<center>
								<table>
									<tr>
										<td>
											<center>
												<img src="../images/webcomics/beauty_cuts_deep.jpg" alt="" />
												<br />
											</center>
										</td>
									</tr>
								</table>
							</center>
						</td>
					</tr>
				</table>
			</center>
		</div>
		<br />
	</body>
</html>

CSS:

/* stylesheet for the webcomics page */

body {
	font: 12pt Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #000;
}
a {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:link {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:hover {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
a:active {
	text-decoration: underline;
	line-height: 26px;
	color: #000;
}
p.comics {
	text-align: center;
}
select {
	width: 215px;
}

html-css javascript web-design

Edited 16 Years Ago by jwmollman because: n/a

4 Contributors
5 Replies
593 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by Member #120589

Dani AI

Generated 10 Months Ago

A clear, maintenance-friendly pattern is to either (A) keep one content container and swap its contents based on the select value, or (B) keep multiple small panels and hide‑all / show‑one. Both avoid embedding logic in anchor hrefs and work cleanly with a "View" button. 's toggle idea is a good starting point for single toggles; extend it by either looping all panels and hiding them, or by updating a single image + caption element. 's server-side panel approach is valid if you need server rendering, but is overkill for static images. was right: use simple show/hide for static content; use Ajax only if content is dynamic.

Example: hide-all / show-target using a data attribute (keeps markup small):

<!-- add data-key to each panel; a default panel can be hidden -->
<div class="comic-panel" data-key="Condo">…</div>
<div class="comic-panel" data-key="Craigslist">…</div>

.hidden { display: none; }

document.getElementById('viewBtn').addEventListener('click', function () {
  var chosen = document.getElementById('comicSelect').value;
  document.querySelectorAll('.comic-panel').forEach(function (p) {
    p.classList.toggle('hidden', p.getAttribute('data-key') !== chosen);
  });
});

If you prefer a single container (smaller DOM, simpler markup), keep a mapping of keys to image/title and set the src/textContent on click:

var map = {
  Condo: { img: 'images/condo.jpg', title: 'Condo Mints' },
  Craigslist: { img: 'images/craigslist.jpg', title: 'The Craigslist Deal' }
};
btn.addEventListener('click', function () {
  var key = select.value;
  if (map[key]) {
    imgEl.src = map[key].img;
    titleEl.textContent = map[key].title;
    container.classList.remove('hidden');
  }
});

Practical tips: use <button type="button"> (prevents form submit), add a <label> for the select, include meaningful alt text, and update an aria-live region so screen readers announce changes. Preload or lazy-load images depending on quantity. Replace tables used purely for layout with CSS + divs or <figure> for better semantics and responsiveness.

All 5 Replies

Bandwidth Media 0 Newbie Poster

16 Years Ago

JAVASCRIPT

function toggle(layer) {
    var d = document.getElementById(layer);
    d.style.display = (d.style.display == 'none') ? '' : 'none';
    }

HTML - Link Code

<a href="javascript:toggle('tableID')" title="Click to toggle the table">image code here</a>

HTML - Table Style

<table id="tableID" style="display: none;">

Try that, see how you go :)

Lusiphur 185 Practically a Posting Shark

16 Years Ago

If you have any knowledge of ASP.Net coding at all you might look into having different tables in different <asp:panel> and simply making the appropriate panel(s) visible/invisible as needed based on combination of drop-down and button click.

However, this does require a bit of coding knowledge in ASP.Net and a web-server capable of supporting .Net applications.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jwmollman 0 Light Poster · Answer 1 · 2010-07-17T16:23:20+00:00

I can't seem to edit this post, but I guess what I'm actually trying to do is display a table on button click.

jwmollman 0 Light Poster · Answer 2 · 2010-07-18T09:42:53+00:00

Thanks for the response.

I just copied the Javascript and placed it within the <script> tags. Then I just gave the bottom table which I already had, an ID of "tableID" which matches that in the Javascript. Then I placed the anchor tag in the top table. I also noticed there were bold tags in the anchor tag. I didn't know what those were for, so I removed them, and I can toggle the bottom table.

I managed to place the code into a button so the Javascript executes when the user clicks a button. How can I make this toggle between different tables depending on the option selected in the drop-down menu?

Member #120589 · Answer 3 · 2010-07-19T02:38:39+00:00

You can have static data displayed / not displayed via vanilla js (as above) OR
You can have dynamic data populate the same container (div) via Ajax.

The simplest method (hiding/showing) is usually the best, unless your data is dynamic (db updates etc).

How can I display a div on button click?

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers