If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

I will be in and out all weekend. My granddaughter is getting married Sat.
You maybe able to do this yourself. But if not I'll be back.
And maybe someone else will come along and modify the code to do what you want.

I've been trying to figure a way for each of the multiple instances of the button to work individually, but have come up empty. The first button works great but it opens up all the previously hidden sections, and the other buttons don't open of close their respective sections. I wish I had a better understanding of all this.

Any additional help would be greatly appreciated, ad I hope you had a great wedding.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
var incident = 2;
function open_text() {
//document.getElementById('img1').style.display = "none";
//document.getElementById('img2').style.display = "block";
document.getElementById('a'+incident).style.display = "block";
incident++;
if(incident == 4){
document.getElementById('thing4').style.display = "block";
document.getElementById('thing5').style.display = "block";
document.getElementById('img1').style.display = "none";
}
}
function close_text3(){
document.getElementById('a3').style.display = "none";
}
function close_text2(){
document.getElementById('a3').style.display = "none";
document.getElementById('a2').style.display = "none";
}
</script>
<style type="text/css">
#a2, #a3{
display:none;
}
#img1{
height: 48px;
width: 46px;
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_top_zps7dcacefa.png');
}
#img1:hover{
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_bottom_zps0286edcb.png');
}
/*#img2, #img3{
height: 48px;
width: 46px;
display:none;
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png');
}*/
#thing4, #thing5{
display:none;
}
#thing4 img, #thing5 img{
width:46px;
height:48px;
vertical-align:bottom;
}
#thing4 span, #thing5 span{
font-size:smaller;
position:relative;
right:15px;
}
</style>
</head>
<body>
<div class="articles">
<div id="a1" class="texter">
<h1 style="clear:both;">Main 1 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
</div>
<div id="a2" class="texter">
<div id="thing4" onclick="close_text2();">
<img src="http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png">
<span>removes everything below</span>
</div>
<h1>Main 2 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
</div>
<div id="a3" class="texter">
<div id="thing5" onclick="close_text3();">
<img src="http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png">
<span>removes everything below</span>
</div>
<h1>Main 3 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
</div>
<div id="img1" onclick="open_text();"></div>
</div>
</body>
</html>

Evolution - The non-random survival of random variants.

"If you leave hydrogen alone, for long enough, it begins to think about itself."

Users who have thanked sunfighter for this post:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
var incident = 2;
function open_text() {
//document.getElementById('img1').style.display = "none";
//document.getElementById('img2').style.display = "block";
document.getElementById('a'+incident).style.display = "block";
incident++;
if(incident == 4){
document.getElementById('thing4').style.display = "block";
document.getElementById('thing5').style.display = "block";
document.getElementById('img1').style.display = "none";
}
}
function close_text3(){
document.getElementById('a3').style.display = "none";
}
function close_text2(){
document.getElementById('a3').style.display = "none";
document.getElementById('a2').style.display = "none";
}
</script>
<style type="text/css">
#a2, #a3{
display:none;
}
#img1{
height: 48px;
width: 46px;
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_top_zps7dcacefa.png');
}
#img1:hover{
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_bottom_zps0286edcb.png');
}
/*#img2, #img3{
height: 48px;
width: 46px;
display:none;
background-image: url('http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png');
}*/
#thing4, #thing5{
display:none;
}
#thing4 img, #thing5 img{
width:46px;
height:48px;
vertical-align:bottom;
}
#thing4 span, #thing5 span{
font-size:smaller;
position:relative;
right:15px;
}
</style>
</head>
<body>
<div class="articles">
<div id="a1" class="texter">
<h1 style="clear:both;">Main 1 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.This is for Main Group 1.
</p>
</div>
<hr class="line">
</div>
<div id="a2" class="texter">
<div id="thing4" onclick="close_text2();">
<img src="http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png">
<span>removes everything below</span>
</div>
<h1>Main 2 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.This is for Main Group 2.
</p>
</div>
<hr class="line">
</div>
<div id="a3" class="texter">
<div id="thing5" onclick="close_text3();">
<img src="http://i815.photobucket.com/albums/zz74/sunfighter41/arrow_close_zpsd7fbfb3e.png">
<span>removes everything below</span>
</div>
<h1>Main 3 Group</h1>
<h2>Story One Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
<h2>Story Two Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
<h2>Story Three Title</h2>
<div class="summary">
<p>
This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.This is for Main Group 3.
</p>
</div>
<hr class="line">
</div>
<div id="img1" onclick="open_text();"></div>
</div>
</body>
</html>

Wow this is pretty amazing. It works almost exactly how it should. I'm starting to feel like some unappreciative idiot at this point for bring up these last few things, but one of them is pretty necessary. I copied the code into a blank document so I wouldn't mess anything up. If I'm missing anything, let me know. There's one minor issue, and one major.

It start off perfectly. Show the 3 stories with the arrow. There's the hover and then the next stores open up when clicked. Perfect!

Here's the minor issue, when the second set of stories opens up, the arrow jumps down to below those stories instead of having two arrows ( one between group 1 and 2) and the next below group 2. Now this could actually work, except that when you click the second arrow, the first one reappears (as upward pointing)

To illustrate, this is what happens:

Initial view: (prefect)

MainGroup1
--story 1
--story 2
--story 3***downward arrow 1***

After clicking arrow 1:

MainGroup1
--story 1
--story 2
--story 3*** Nothing, but this is the place where the arrow would be ***

The bigger problem I'm having (which is showing up in Firefox, Safari and IE). These two problems may be related in that they both involve the visibility of the first arrow.

OK here goes… When I click each arrow to expand the page, it works as described above. There's the small hiccup of the first arrow going away (described above).

When it's all expanded, and I click the second button, everything below is removed, which is great. If I then click the first button (the only one visible now---which is also correct) the second set of stories is removed. Also great.

But now the problem is that the first arrow is also gone instead of switching back to the downward point in arrow. If the user expands everything, then collapses them back, it should return to the initial state of the page. At this point, if the user clicks that first button, they are them stuck unless they refresh the page.

I probably could have explained this far more concisely, and I apologize for the HUGE post, but I wanted to avoid miscommunication. I hope this is explained in the kind of detail you need and I really do appreciate you going above and beyond what anyone would expect.