<head>
<script src=“js/jquery-1.3.2/jquery-1.3.2.js“ type=“text/javascript“></script>
<script src=“js/more-show-hide.js“ type=“text/javascript“></script>
<style type=“text/css“>
.demo-show {
width: 350px;
margin: 1em .5em;
}
.demo-show h3 {
margin: 0;
padding: .25em;
background: #bfcd93;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
}
.demo-show div {
padding: .5em .25em;
}
</style>
</head>
<body>
<div class=“demo-show“>
<h3>Title 1</h3>
<div>Lorem…</div>
<h3>Title 2</h3>
<div>Ipsum…</div>
<h3>Title 3</h3>
<div>Dolor…</div>
</div>
</body>
Jetzt kommt die Datei more-show-hide.js
Option 1: Independent
Remember, this is the option that allows each detail section to be shown or hidden independently of the others. It’s also the easiest of the three to accomplish.
The key method we’ll be using here is .slidetoggle(), an excellent little effect that slides the matching elements down when they are hidden and slides them up when they are visible. But before we do that, let’s make all of the detail sections hide when the DOM is ready:
$(document).ready(function() {
$(‘div.demo-show:eq(0)> div’).hide();
$(‘div.demo-show:eq(0)> h3′).click(function() {
$(this).next().slideToggle(‘fast’);
});
});
Line 2 gets every <div> that is a child of the first <div class="demo-show"> and hides them. I’m using :eq(0) here because I’ll be showing two show-hide examples that use the same class, but we’re taking the examples one at a time.
Now, we can bind a click handler to each <h3> that is a child of <div class="demo-show">. You can see this in line 3
All that’s left is to drop the .slidetoggle() method inside the click method. Since we know that each <div> that we want to toggle appears next to each <h3> that might be clicked, we can use the handy .next() method (line 4):
————————————————————————————————
Option 2: One and Only
Let’s move on now to the scenario in which we want one detail <div> at all times, but no more than one. The first thing we’ll need to change for this one is the line that hides all of the child <div>s of <div class="demo-show">. We’ll make it hide all but the first <div>:
Again, we add an :eq() to the containing <div> selector, this time with 1 as the index, because we want our second demo (and because JavaScript numbering starts at zero).
Next, we add the same click handler for the <h3> elements, but this time we need to change the effects that take place within it:
Line 4 above slides down the <div> that follows the clicked <h3> by using $(this).next(), but only if that <div> is hidden (:hidden). Also, now that we’ve chained .next() onto $(this), we’ve changed the context to that following <div>. So then in line 5 when we refer to .siblings(), we’re actually getting the siblings of the <div>. Since out of all the siblings we only want to slide up the slides up the ones that are visible <div>s, we use .siblings('div:visible').
Zusammenfassen:
$(document).ready(function() {
$(‘div.demo-show:eq(0)> div:gt(0)’).hide();
$(‘div.demo-show:eq(0)> h3′).click(function() {
$(this).next(‘div:hidden’).slideDown(‘fast’).siblings(‘div:visible’).slideUp(‘fast’);
});
});
—————————————————————————————————-
Option 3: Zero or One
Remember from More Showing, More Hiding that we are working with a simple <h3> / <div> structure:
-
<div class=„demo-show2″>
-
<h3>Title 1</h3>
-
<div>Lorem…</div>
-
<h3>Title 2</h3>
-
<div>Ipsum…</div>
-
<h3>Title 3</h3>
-
<div>Dolor…</div>
-
</div>
With this option #3, we start with all of the <div>s hidden. If we click on one of the headings, the following <div> will slide down. If we click on the same heading again, that <div> will slide back up. Clicking on on any heading will also hide all of the other <div>s — the ones that don’t immediately follow it. Therefore, no more than one <div> can be open a a time.
To achieve this, we start by hiding all of the <div>s inside the first (:eq(0)) <div class="demo-show2">:
Then we set up the .click() method for all of the relevant <h3> elements
Finally, inside the .click(), we toggle the >div< immediately following the clicked >h3< and hide all the other >div<s that are visible siblings of the toggled one. Here is the complete script:
