Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18
  1. #16
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    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.

  2. #17
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Code:
    <!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.

  3. Users who have thanked sunfighter for this post:

    Biorick (09-27-2013)

  4. #18
    New Coder
    Join Date
    Sep 2013
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Code:
    <!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 ***

    MainGroup 2
    --story 1
    --story 2
    --story 3
    ***downward arrow 2*** (correct)

    After clicking arrow 2:

    MainGroup1
    --story 1
    --story 2
    --story 3
    ***upward arrow 1 (it's back) ***
    MainGroup2
    --story 1
    --story 2
    --story 3
    ***upward arrow 2***
    MainGroup3
    --story 1
    --story 2
    --story 3
    (I will need a third arrow here, but If I can't figure that out, I have no business even getting near code )

    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.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •