Hide then show (one by one on-click) DIVs problems

JavaScript
1

Hello all, let me start by saying I am slowly teaching myself JavaScript/Jquery and while I feel I am in a better place today than I was a couple days ago I just can’t seem to solve this problem and would very much appreciate some guidance.

I am working on a splash page for a website that has an accordion menu bar on the left side and information relating to those menu items on the right side. As of now the page loads all the DIVs and then as you click through the menu on the left it hides everything except the one that relates to that menu item. What I would like to achieve is to have all the DIVs that relate to the menu hidden when the page loads and then show them individually as you click through the menu.

Below is my code, I realize it needs a lot of cleaning up but at this point I’m just trying to get this to work.

Thank you in advance for any help you can give.

<?php
require_once('includes/config.php');
$_SESSION['qset']="false";
// FMStudio Pro - do not remove comment, needed for DreamWeaver support ?>
<?php
$found_user_find = $session->newFindCommand('php_users');
$found_user_findCriterions = array('ID_Contact'=>'=='.$_SESSION['user']);
foreach($found_user_findCriterions as $key=>$value) {
    $found_user_find->AddFindCriterion($key,$value);
}

fmsSetPage($found_user_find,'found_user',10);

$found_user_result = $found_user_find->execute();

if(FileMaker::isError($found_user_result)) fmsTrapError($found_user_result,"nopermission.php");

fmsSetLastPage($found_user_result,'found_user',10);

$found_user_row = current($found_user_result->getRecords());

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to the eMail Center</title>
<link rel="stylesheet" type="text/css" href="emailcenterstyle_test.css"/>

<style type="text/css">

.menu_list {
  width: 250px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size:12px;
  color:#FFFFFF;
  background-color:#060;
  height:850px; }

.menu_head {
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  margin:1px;
  font-weight:bold;
  background: #060 url(left.png) center right no-repeat;
  border:thin;
  border-bottom-color:#FFF;
  border-top-color:#FFFFFF; }

.menu_body {
  display:none; }

.menu_body a {
  padding: 5px 10px;
  display:block;
  color:#FFFFFF;
  background-color:#666666;
  padding-left:10px;
  text-decoration:none;
  line-height: 24px;
  border:thin;
  border-bottom-color:#FFF;
  border-top-color:#FFFFFF; }

.menu_body a:link {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }

.menu_body a:visited {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }

.menu_body a:hover {
  color: #FFFFFF;
  text-decoration:underline;
  font-weight:bold; }

.menu_body a:active {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }

.menu_head a {
  display:block;
  color:#FFFFFF;
  background-color:#060;
  text-decoration:none;
  border:thin;
  border-bottom-color:#FFF;
  border-top-color:#FFFFFF; }

.menu_head a:link {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }

.menu_head a:visited {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }

.menu_head a:hover {
  color: #FFFFFF;
  text-decoration:underline;
  font-weight:bold; }
.menu_head a:active {
  color: #FFFFFF;
  text-decoration:none;
  font-weight:bold; }
.welcome {
	float:left;
	margin-left:auto;
	margin-right:auto;
	padding:25px;
	width:475px;
	text-align:left;
	vertical-align:middle; }

.welcome p{ line-height:6px; }

.current{ color: black; }

.hidden { display: none; }

 .unhidden { visibility: visible; }
</style>


</head>
	<body>
    <div id="container">
		<?php include('includes/menu_header_splash.php'); ?>
<div style="float:left;" >
  <div id="tabs">
  <div id="firstpane" class="menu_list">
		<p class="menu_head"><a href="#def_CLP">CLP</a></p>
		<div class="menu_body">
		<a href="#def_welcome">Welcome Training Email</a>
         <a href="#def_renewal">Renewal Kickoff Email</a>
         <a href="#def_loyal">Loyalty Training Email</a>	
         <a href="#def_usage">Usage Statements</a>	
		</div>
		<p class="menu_head"><a href="#def_elinks">Elinks</a></p>
	<div class="menu_body">
       </div>
		<p class="menu_head"><a href="#def_stimlulation">Usage Stimulation Email</a></p>
		<div class="menu_body">
       </div>
       <p class="menu_head"><a href="#def_cert">Certified Trainer Email</a></p>
		<div class="menu_body">
       </div>
        <p class="menu_head"><a href="#def_access">Access and Integration Email</a></p>
		<div class="menu_body">
       </div>
       		<p>&nbsp;</p>
		<p>&nbsp;</p>
        <p>&nbsp;</p>
		<p>&nbsp;</p>

  </div>  </div></div>
        <div class="welcome">


            <div id="" class="default"><h1>Welcome to the Email Center</h1><hr /></div>
           <div class="hide">
           <div id="def_CLP"><h3>CLP</h3>
<h2>definition</h2></div>

          <div id="def_welcome"><h3>Welcome Training Email</h3>
<h2>Email to new customers introducing training program and materials</h2>
<p><img src="images/SubscriptionWelcomePage.jpg" /></p><?php echo "<a href='emailCenter_new.php?type=welcome'><img src='images/But_sendemail.jpg' /></a>";?>
          </div>

          <div id="def_renewal"><h3>Renewal Kickoff Email</h3>
<h2>Email to current customers to start renewal process</h2>
<p><img src="images/SubscriptionRenewPage.jpg" /></p><?php echo "<a href='emailCenter_new.php?type=elink'><img src='images/But_sendemail.jpg' /></a>"; ?></div>

            <div id="def_loyal"><h3>Loyalty Training Email</h3>
<h2>Email to current customers after renewal is complete to introduce training program</h2>
<p><img src="images/SubscriptionLoyaltyPage.jpg" /></p><?php echo "<a href='emailCenter_new.php?type=cert'><img src='images/But_sendemail.jpg' /></a>";?></div>

          <div id="def_usage"><h3>Usage Statements</h3>
          <h2>definition</h2>
           <p><img src= /></p><a href='#'><img src='images/But_usagestate.jpg' /></a></div>

          <div id="def_elinks"><h3>Elinks</h3>
          <h2>definition</h2>
           <p><img src="images/Elink_Screenshot.jpg" /></p><?php echo "<a href='emailCenter_new.php?type=elink'><img src='images/But_elinks.jpg'></a>";?></div>

          <div id="def_stimlulation"><h3>Usage Stimulation Email</h3>
          <h2>definition</h2>
          <p><img src="" /></p><a href='#'><img src='images/But_sendemail.jpg' /></a></div>

          <div id="def_cert"><h3>Certified Trainer Email</h3>
<h2>Congratulatory email to new Certified Trainers</h2>
<p><img src= /></p><a href='#'><img src='images/But_sendemail.jpg' /></a></div>

          <div id="def_access"><h3>Access and Integration Email</h3>
<h2>Integration pre-call email</h2>
<p><img src="images/SubscriptionAccess.jpg" /></p><a href='#'><img src='images/But_sendemail.jpg' /></a></div>
        </div>
        </div>

		<p>&nbsp;</p>
		<?php include('includes/footer.php'); ?>
    </div> <!-- Container -->

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>
var tabs = document.getElementById('tabs');
tabs.onclick = function (evt) {
    evt = evt || window.event;
    var link = evt.target || evt.srcElement,
        links,
        i,
        target;
    if (link.nodeType === 1 && link.nodeName === 'A') {
        links = this.getElementsByTagName('a');
        for (i = 0; i < links.length; i += 1) {
            target = document.getElementById(links[i].href.split('#')[1]);
            if (link !== links[i]) {
                target.className = 'hidden';
            }
			else {
                target.className = '';
            }
        }
        return false;
    }

};
tabs.getElementsByTagName('a')[0].click();
</script>
<script type="text/javascript">
$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
	$("#firstpane p.menu_head").click(function()
    {
		$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(left.png)"});
	});
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondpane p.menu_head").mouseover(function()
    {
	     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
	});
});
</script>
  </body>
</html>
2

When I tested your page, all the content showed briefly, but as soon as the JavaScript loaded everything was hidden except for the “CLP” page.

Are you trying to stop that brief flash of all the content?

If so, you could just add the “hidden” class to each of the <div> elements in the HTML.

But what if the user has JavaScript disabled? They won’t be able to get to the rest of the content.

3

I actually don’t mind if it flashes, I’m just not able to even achieve that. Do you know why it would work for you but not for me?

4

Which browser/OS are you testing with?

5

I’m on a Mac and testing in Safari and Firefox and neither has worked

6

Ah ha! I’m using Windows 7, but I still got an error in Safari. The problem was with this line:


tabs.getElementsByTagName('a')[0].click();

Safari doesn’t support the “click” method… But it does have dispatchEvent:


var a = tabs.getElementsByTagName('a')[0];
if (a.click) {
    a.click();
} else if (a.dispatchEvent) {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, true, window);
    a.dispatchEvent(e);
}

This worked for me, but like I said, no Mac. Does this help?

7

Worked like a charm!!! Thank you so much!!!

If you have a moment, I would love to know why this way worked.

Again, thank you so much!

8

Your goal was to trigger a “click” event on an element with JS. Different browsers allow you to do this in different ways. Most browsers simply have a “click” method, while others have the more general “dispatchEvent”. (Actually, most browsers support both.)

If the “click” method is available, then we’ll just use that, no need to get fancy. If it isn’t available, then we need to build a special “click” event object and call “dispatchEvent”. Either way, we’re accomplishing the same task: Asking the browser to pretend that an element was clicked.

…or did I misunderstand the question :stuck_out_tongue:

9

no that is great, thank you again!