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.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Showing/Hiding Div onlick

    Hey all,

    I'm trying to show one div and hide all other divs when an item on the menu is clicked. I found a similar script online and made some adjustments, but it's not working. Any ideas?

    Secondly, when an item is selected, I'm trying to change the class as well. For example, when someone clicks on "A Public View," I want the background color to change just to show "A Public View" is selected. I obviously did it wrong, as it's not working. I'm sure it's an idiotic mistake. Thanks




    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    <script type="text/javascript">
    function showonlyone(thechosenone) {
          var newboxes = document.getElementsByTagName("div");
                for(var x=0; x<latestnews.length; x++) {
                      name = latestnews[x].getAttribute("class");
                      if (name == 'latestnews') {
                            if (latestnews[x].id == thechosenone) {
                            latestnews[x].style.display = 'block';
                      }
                      else {
                            latestnews[x].style.display = 'none';
                      }
                }
          }
    }
     
    </script>
    
    
    
    <style type="text/css">
    <!--
    
    #home_highlights {
    width: 785px;
    height:445px;
    background-color: #FFFFFF;
    color: white;
    padding-left: 46px;
    }
    
    #blogs {
    width: 785px;
    height: 35px;
    background-color: #bf2626;
    color: white;
    border: 1px solid black;
    padding-left: 46px;
    }
    
    #blogs .highlights_bar li {
    list-style: none;
    float: left;
    display: inline;
    padding-left: 20px;
    padding-top: 5px;
    }
    
    #blogs .highlights_bar li a {
    	color: #FFFFFF;
    	text-decoration: none;
    	font-size: 20px;
    }
    
    .latestnews1  {
    		display: none;
    }
    
    .latestnews2  {
    display: none;
    }
    
    .latestnews3 {
    display: none;
    }
    
    .latestnews4 {
    display: none;
    }
    
    .blog [
    display: block;
    	float:left;
    	padding: 8px 15px;
    	color: #fff;
    	cursor: pointer;
    }
    
    #home_highlights #blog .blog_selected {
    	background: #df6161;
    	border-top: 5px solid black;
    	color: #E5695D;
    	padding: 8px 20px;
    	float: left;
    	display: block;
    	margin-top: -5px;
    	height: 40px;
    	}
    -->
    </style>
    
    <div id="home_highlights">
    <div id="blogs">
    <ul class="highlights_bar">
    <li><a href="#" onclick="showonlyone('latestnews1');">Straight 2 Jackie</a></li>
    <li><a href="#" onclick="showonlyone('latestnews2');">A Public View</a></li>
    <li ><a href="#" onclick="showonlyone('latestnews3');">Hilary's Double Take</a></li>
    <li><a href="#" onclick="showonlyone('latestnews4');">Newshour</a></li>
    </ul>
    </div>
    <div id="latestnews">
    <div class="latestnews1">
    <p>Test 1</p>
    <hr />
    </div>
    <div class="latestnews2">
    <p>test 2</p>
            
    <hr />
    </div>
    <div class="latestnews3">
    <p>Test 3</P>
    </div>
    <div class="latestnews4">
    <p>Test 4</P>
    </div>
    </div>
    </div>
    
    
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    0
    Thanked 4 Times in 4 Posts
    If I may ask, are you using any kind of developer-tools or console when trying this?
    Use Chrome, and hit CTRL+SHIFT+J to open one up...

    There might be more wrong here, but just what do you think latestnews.length might be?
    You have now such variable declared anywhere here...
    - Spinner

  • Users who have thanked Spinner for this post:

    javanewbie7 (10-30-2012)

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts
    yeah, I originally tried newboxes in place of all of the "latestnews", but neither worked. When I use the newboxes and test it in Chrome, I don't get an error, but it doesn't work.

    That said, good call on trying it out in the developers tools in chrome. I'm new to JS and always forget about it.


  •  

    Posting Permissions

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