I am trying to create a number of panels that can expand and collapse like an accordion, but more than one can be open at one time. There's an image of an arrow that, when clicked, expands or contracts the panel. Each image of the said arrow has its own unique ID. As of now, I have to create a new onclick event for each image, which in turn causes an event with each respective div. What I want to know is if there’s a way to write only one (javascript or Jquery) function that can respond to any of the click events appropriately.
The text in there is just something I grabbed to add content to the panels. I don't want to cause copyright infringement, so I'll say that the text is kudos to IGN.com. I did not write that text.
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#longDescription1").hide();
$("#afterDropDown1").hide();
$("#rightArrow").click(function () {
$("#beforeDropDown1").hide();
$("#afterDropDown1").show();
$("#shortDescription1").hide();
$("#longDescription1").slideDown("slow");
});
$("#downArrow").click(function () {
$("#longDescription1").slideUp("slow", function () {
$("#afterDropDown1").hide();
$("#beforeDropDown1").show();
});
$("#shortDescription1").show("slow");
});
$("#longDescription2").hide();
$("#afterDropDown2").hide();
$("#rightArrow2").click(function () {
$("#beforeDropDown2").hide();
$("#afterDropDown2").show();
$("#shortDescription2").hide();
$("#longDescription2").slideDown("slow");
});
$("#downArrow2").click(function () {
$("#longDescription2").slideUp("slow", function () {
$("#afterDropDown2").hide();
$("#beforeDropDown2").show();
});
$("#shortDescription2").show("slow");
});
});
</script>
<style type="text/css">
div.longDescription, div.shortDescription
{
text-align: left;
float: left;
width: 60%;
}
div.panel
{
height: 200px;
display: none;
}
p.header
{
font-size: 1.5em;
color: Teal;
}
</style>
</head>
<body>
<div class="afterDropDown" style="width: 60%" id = "afterDropDown1">
<p class="header">
Death of the Dynasty.
<img src="down arrow.jpg" alt="Click to hide." height="20px" width="20px" style="float: right"
id="downArrow" /></p>
</div>
<div class="longDescription" id = "longDescription1">
<p>
I am going to put it out there. Like a cat amongst the pigeons. Like a pig escaping
the sack. Like a festering, drooling Caliban among the rocks of a storm tossed isle.
And the it, is this: Nintendo is the unquestionable frontrunner when it comes to
inventing and investing in videogame dynasties.</p>
<p>
News? Maybe not. But why is this?</p>
<p>
In 2011, Mario celebrated birthday number 25. By now, "Mario" is more than a name.
Mario is a continued, and continuing, line of videogame royalty.</p>
<p>
This is one of Nintendos greatest strengths. Nintendo is like big tobacco. Only,
you know, nicer. It hooks fans young, and then doesnt let go. Many of us felt like
we grew up with Mario. Or, if not Mario, Link. The Legend of Zelda series, itself
over 25 years old, is undeniably a videogame dynasty too.</p>
</div>
<div class="beforeDropDown" style="width: 60%" id = "beforeDropDown1">
<p class="header">
Death of the Dynasty.
<img src="right arrow.png" alt="Click to expand" height="20px" width="20px" style="float: right"
id="rightArrow" /></p>
</div>
<div class="shortDescription" id = "shortDescription1">
<p>
Will any of todays gaming heroes be able to match the lengthy lifespans of legends
like Mario or Link? Expand to find out.
</p>
</div>
<br />
<br />
<br />
<br />
<br />
<!--//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="afterDropDown" style="width: 60%" id = "afterDropDown2">
<p class="header">
Building The Ultimate Zelda.
<img src="down arrow.jpg" alt="Click to hide." height="20px" width="20px" style="float: right"
id="downArrow2" /></p>
</div>
<div class="longDescription" id = "longDescription2">
<p>
"Whats your favorite Zelda?" Its a question Ive heard time and time again, yet
the truth is I dont have a favorite Zelda. I feel almost every one does something
unique and different that distinguishes it from the rest of the series in my mind.
Majoras Mask had its anxious time system and melancholy tone, Wind Waker its gorgeous
cel-shaded open world; Twilight Princess was a more mechanically refined version
of Ocarina of Time, Phantom Hourglass pioneered how to make a Zelda game on the
touch screen before Spirit Tracks perfected it, and Skyward Sword made motion controls
work.</p>
<p>
Yet even a dyed-in-the-wool Zelda fanboy like me has to admit that after a quarter
century, the series is in danger of going stale. Each Zelda has a wondrous world
to explore, brain-busting dungeons, quirky characters and moments of serene beauty,
but they can feel like theyre drawing from the same well too often. The franchise
could use some shaking up.</p>
<p>
Rather than see Zelda go the way of Mega-Man, I figured it was high time to look
back at some of the most inspired choices the series has made. Which of them could
be combined to make the (drumroll please)... Ultimate Zelda?</p>
</div>
<div class="beforeDropDown" style="width: 60%" id = "beforeDropDown2">
<p class="header">
Building The Ultimate Zelda.
<img src="right arrow.png" alt="Click to expand" height="20px" width="20px" style="float: right"
id="rightArrow2" /></p>
</div>
<div class="shortDescription" id = "shortDescription2">
<p>
Is taking the best bits of Link's adventures a recipe for perfection?
</p>
</div>
</body>
</html>