Keep Visibility after loading .php, using "toggle visibility" javascript Options

[Bacchanal]

http://www.bacchanalpromotions.com/acts.php


Basically I'm trying to keep the links visible after clicking to change the image. Right now when the photo .php displays, the page resets and all of the toggles return to invisible.

Here is an example of how I toggle the visibility manually:

CODE

<a href="java script:;"  onclick="toggle_visibility('fire');">
<strong>Fire Acts</strong></a>
<div id="fire" style='display:none'>
<p>
<br />
<a href="acts.php?page=breathing">Breathing</a><br />
<a href="acts.php?page=eating">Eating</a><br />
<a href="acts.php?page=staff">Staff</a><br />
<a href="acts.php?page=poi">Poi</a><br />
<a href="acts.php?page=hoop">Hoop</a><br />
<a href="acts.php?page=fans">Fans</a><br />
<a href="acts.php?page=rope">Rope Dart</a>
</p>
</div><!--fire-->
<br />
<br />

Here is the code that brings up the .php

CODE

<div id="left">
<?php
$page = $_GET['page'];

switch($page) {

case "silks";
$content = "acts-aerial.php";
break;

case "chain";
$content = "acts-chain.php";
break;

case "lyra";
$content = "acts-lyra.php";
break;

case "hammock";
$content = "acts-hammock.php";
break;

case "trapeze";
$content = "acts-trapeze.php";
break;

case "balloons";
$content = "acts-balloons.php";
break;

case "ballspinning";
$content = "acts-ballspinning.php";
break;

case "bedofnails";
$content = "acts-bedofnails.php";
break;

case "blockhead";
$content = "acts-blockhead.php";
break;

case "breathing";
$content = "acts-breathing.php";
break;

case "burlesque";
$content = "acts-burlesque.php";
break;

case "caricature";
$content = "acts-caricature.php";
break;

case "contactjuggling";
$content = "acts-contactjuggling.php";
break;

case "contortion";
$content = "acts-contortion.php";
break;

case "divination";
$content = "acts-divination.php";
break;

case "eating";
$content = "acts-eating.php";
break;

case "facepainting";
$content = "acts-facepainting.php";
break;

case "fans";
$content = "acts-fans.php";
break;

case "glasseating";
$content = "acts-glasseating.php";
break;

case "hoop";
$content = "acts-hoop.php";
break;

case "horrorclown";
$content = "acts-horrorclown.php";
break;

case "jumping";
$content = "acts-jumping.php";
break;

case "magic";
$content = "acts-magic.php";
break;

case "minibike";
$content = "acts-minibike.php";
break;

case "objectmanipulation";
$content = "acts-objectmanipulation.php";
break;

case "poi";
$content = "acts-poi.php";
break;

case "razorblades";
$content = "acts-razorblades.php";
break;

case "ropedart";
$content = "acts-ropedart.php";
break;

case "russianbar";
$content = "acts-russianbar.php";
break;

case "staff";
$content = "acts-staff.php";
break;

case "statue";
$content = "acts-statue.php";
break;

case "stilts";
$content = "acts-stilts.php";
break;

case "straitjacket";
$content = "acts-straitjacket.php";
break;

case "swordswallowing";
$content = "acts-swordswallowing.php";
break;

case "tightrope";
$content = "acts-tightrope.php";
break;

case "tossjuggling";
$content = "acts-tossjuggling.php";
break;

case "unicycling";
$content = "acts-fire.php";
break;

default:
$content = "acts-breathing.php";
break;
}
?>

<?php include($content); ?>

</div><!--e left-->

Here is the .php with the photo, and my first attempt at keeping the visibility... It failed. For a test of this, click the "circus acts" link and then click "silks". That has the test code on it, but it functions exactly the same as the others...

CODE

<img src="act-photos/silks.jpg" height="586" width="390" />
<a href="java script:;"  onload="toggle_visibility('cirque');" />

Any ideas?

Thanks so much in advance!

This post has been edited by Bacchanal: Nov 6 2013, 10:13 AM

[Christian J]

CODE

<a href="java script:;"  onload="toggle_visibility('cirque');" />

The above is invalid HTML. Links can't have onload attributes, and they must have </a> end tags. Instead, try putting snippets like this in all the included PHP files:

CODE

<script type="text/javascript">toggle_visibility('fire'); </script>

...and change "fire" to the ID of the DIV you want visible in each PHP include.

Sidenote: It's not a good idea to hide content with CSS if javascript is required to show it:

CODE

<div id="fire" style='display:none'>

...since that breaks the page for users with javascript disabled. Instead, let javascript hide the content too:

CODE

<div class="toggle" id="fire">fire sub menu</div>
<div class="toggle" id="cirque">cirque sub menu</div>

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

// hide all toggle sections when page is loaded:
var div=document.getElementsByTagName('div');
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].style.display='none';
    }
}

// show specified section when page is loaded:
toggle_visibility('fire');
</script>

[Bacchanal]

Instead, let javascript hide the content too:

Genius! Thank you so much!!!

[Bacchanal]

...

Thanks for your help! Based on your suggestions I have made adjustments to the page, and removed all "style='display:none'" code from the site. I have also attempted to do the same to the other 2 pages on our site that use similar code. These seem to work exactly as intended. Is the code still sloppy? Any help cleaning it up would be appreciated! Thanks again...

CODE

<div id="main">
<h2>Top Hat Side Show</h2>
<p style="width:400px;">A show unlike any other, the Top Hat Side Show takes the one-of-a-kind spectacle of the circus sideshow and introduces it to a whole new market. For the first time, elegant galas, corporate events and family festivals can enjoy a sophisticated portrayal of some of the most death-defying and mystical performing arts found anywhere.
<br />
<br />
Combining high energy fire arts, spectacular circus acts, mind-bending illusions and seemingly impossible sideshow demonstrations, the Top Hat Side Show stretches the imagination, and inspires audiences to question the limits of human achievement.
<br />
<br />
</p>
<a href="java script:;" onclick="toggle_visibility('more');">(Click here for logistics and options.)</a>
<div class="toggle" id="more">
<br />
<a href="java script:;" onclick="toggle_visibility('variations');">Variations</a>
<div class="toggle" id="variations">
<br />
<p>
Unless specifically requested, the Top Hat Side Show is always performed in a family-friendly, corporate-appropriate style. When the audience demographic is known in advance, we can refine the show to better suit their exact preferences. Many of the same acts are used, but the presentations vary from group to group. Here are some examples:
<br />
<br />
<strong>Top Hat School Show</strong><br />
When performing for students (elementary through high school) we can add an educational component to the show. While demonstrating a variety of unique acts, we draw attention to the physics, psychology, and mathematics involved in the acts, as well as providing a history of the rich circus and sideshow culture around the world. This is a very popular choice for school assemblies, since the show is equally fun, inspiring, and educational for students of all ages.
<br />
<br />
<strong>Top Hat Cirque Show</strong><br />
By removing the sideshow element and adding aerials and acrobatics, the Top Hat Side Show becomes a colorful journey into modern circus arts. Stunning silks and other aerial acts are available indoors and even outside with the use of our stand-alone aerial rig.
<br />
<br />
<strong>Top Hat Adult Show</strong><br />
Clients looking for a more risqué show may consider this option. In addition to the comedy in the show turning towards the adult side, a burlesque dancer can be added to the show, which adds the desired spice without losing the elegance and class of the production.
<br />
<br />
<strong>Top Hat Horror Show</strong><br />
Great for "dark carnival" or Halloween events, the Horror version of the Top Hat Side Show features a horrifying "Nightmare Clown" illusionist, performing grotesque illusions and otherwise disturbing the audience. The sideshow acts are also intensified, creating a gut-wrenching yet still awe-inspiring spectacle.
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('variations');">Click to collapse this section.</a>
</p>
</div>
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('duration');">Duration</a>
<div class="toggle" id="duration">
<br />
<p>
The Top Hat Sideshow is completely customizable to fit any event, and can be choreographed to any length from two hours or more down to even just a single 3 minute act. The standard three-performer show is approximately 60 minutes, and the four-performer version of the show is typically 75-90 minutes in length. For clients looking for multiple shows in a single day, we can arrange the show into multiple shorter shows to reduce or eliminate repeated acts.
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('duration');">Click to collapse this section.</a>
</p>
</div>
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('performers');">Performers</a>
<div class="toggle" id="performers">
<br />
<p>
The three-performer version of the Top Hat Side Show includes more than 25 different acts, and features an illusionist and two variety artists specializing in various sideshow, fire, and circus acts. Upon request, we can customize the show by adding or replacing different performance styles, creating the perfect show for any event. Clients may choose any of our available acts to add to the show; please visit the acts page for samples of the most popular acts. Shows can be scheduled with any number of performers, from a small single-performer show to a full-scale stadium production featuring dozens of performers.
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('performers');">Click to collapse this section.</a>
</p>
</div>
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('strolling');">Strolling Entertainment</a>
<div class="toggle" id="strolling">
<br />
<p>
In addition to the show itself, the Top Hat Side Show performers are also available before and after the event to provide roving acts throughout the event. Before the show, the performers can entertain while also adding hype and excitement for the upcoming production. After the show the performers can keep the high-energy atmosphere while giving guests a chance to meet the performers and ask questions.
<br />
<br />
For longer events, performers can be scheduled for multiple shows with strolling in between sets, creating a continuous block of entertainment.
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('strolling');">Click to collapse this section.</a>
</p>
</div>
<br />
<br />
<a href="java script:;" onclick="toggle_visibility('themes');">Themes</a>
<div class="toggle" id="themes">
<br />
<p>
Though typically performed in a classic and elegant Victorian style, the Top Hat Sideshow can be tailored to fit many different event themes. Popular alternate themes include:
<br />
<br />
Mardi Gras<br />
Halloween<br />
Cirque<br />
Fire & Ice<br />
Horror / Dark Carnival<br />
Caberet<br />
<br />
<a href="java script:;" onclick="toggle_visibility('themes');">Click to collapse this section.</a>
</p>
</div>
</div>

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

// hide all toggle sections when page is loaded:
var div=document.getElementsByTagName('div');
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].style.display='none';
    }
}
</script>


</div><!--e main-->

CODE

<div id="main">

<div class="buck">
<a class="opacity" href="acts.php?page=silks"><img height="70px" width="182px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a>
</div>
<div class="buck">
<a class="opacity" href="acts.php?page=breathing"><img height="70px" width="182px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a>
</div>
<div class="buck" style="margin-top:20px;">
<a class="opacity" href="acts.php?page=swordswallowing"><img height="70px" width="182px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'" alt="" /></a>
</div>
<div class="buck" style="margin-top:20px; margin-bottom:15px;">
<a class="opacity" href="acts.php?page=jumping"><img height="70px" width="182px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'"alt="" /></a>
</div>
<p style="margin-left:20px;">
Bacchanal Promotions is a full-service entertainment company, specializing in fire performance and circus entertainment.  Based in the Metro-Detroit area, we provide unique entertainment at events throughout North America.  <a href="#" onclick="toggle_visibility('more');">(Click here to read more.)</a>
</p>

<div class="toggle" id="more">
<p style="margin-left:20px"> We strive to deliver the highest quality fire and circus entertainment, and offer a wide variety of unique and elegant acts for any setting.  Though fire performances and circus acts are great additions to any party, our entertainers are perfect for Fire & Ice, Circus, Hawaiian, Mardi Gras, Cirque du Soleil, Vaudeville, and many other themed events.<br />
<br />
All of our performers are fully insured and adhere to strict safety policies.  Fire and circus acts can be performed safely indoors, and can be customized to fit venues of any size.  Our professionalism, experience, and variety make us the best choice to ensure your entertainment exceeds your expectations.<br />
<br />
Our entertainers offer acts most people have never seen, and will never get a chance to see again!  These mind-blowing performances create memories your guests will be talking about for years to come.  <a href="contact.html">Contact us today</a> to see what we can add to <strong>your next event!</strong>
</p>
</div>

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

// hide all toggle sections when page is loaded:
var div=document.getElementsByTagName('div');
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].style.display='none';
    }
}
</script>

</div><!--e main-->

And here's what I changed the original page to:

CODE

<div id="main">
<h2 style="color:#fff;">Available Acts</h2>
<p>Expand the following categories to browse slideshows of each available act. This is a partial list, if there is something you are looking for that isn't listed here, please <a href="contact.html">give us a call</a> and we would be happy to discuss available options.
</p>

<a href="java script:;"  onclick="toggle_visibility('fire');">
<strong>Fire Acts</strong></a>
<div class="toggle" id="fire">
<p>
<br />
<a href="acts.php?page=breathing">Breathing</a><br />
<a href="acts.php?page=eating">Eating</a><br />
<a href="acts.php?page=staff">Staff</a><br />
<a href="acts.php?page=poi">Poi</a><br />
<a href="acts.php?page=hoop">Hoop</a><br />
<a href="acts.php?page=fans">Fans</a><br />
<a href="acts.php?page=ropedart">Rope Dart</a>
</p>
</div><!--fire-->
<br />
<br />

<a href="java script:;"  onclick="toggle_visibility('cirque');">
<strong>Circus and Cirque Acts</strong></a>
<div class="toggle" id="cirque">
<p>
<br />
<strong>Aerial Acrobatics</strong>
<br />
<a href="acts.php?page=silks">Silks</a><br />
<a href="acts.php?page=chain">Chain</a><br />
<a href="acts.php?page=lyra">Lyra</a><br />
<a href="acts.php?page=trapeze">Trapeze</a><br />
<a href="acts.php?page=hammock">Hammock</a><br />
<br />
<strong>Modern Cirque Acts</strong>
<br />
<a href="acts.php?page=russianbar">Russian Bar</a><br />
<a href="acts.php?page=jumping">Jumping Stilts</a><br />
<a href="acts.php?page=contactjuggling">Contact Juggling</a><br />
<a href="acts.php?page=contortion">Contortion / Hand Balancing</a><br />
<a href="acts.php?page=objectmanipulation">Object Manipulation</a><br />
<br />
<strong>Traditional Circus Acts</strong>
<br />
<a href="acts.php?page=minibike">Mini Bike</a><br />
<a href="acts.php?page=tightrope">Tight Rope Walking</a><br />
<a href="acts.php?page=stilts">Stilt Walking</a><br />
<a href="acts.php?page=tossjuggling">Toss Juggling</a><br />
<a href="acts.php?page=unicycling">Unicycling</a><br />
<a href="acts.php?page=ballspinning">Plate Spinning / Ball Spinning</a>

</p>
</div><!--cirque-->
<br />
<br />

<a href="java script:;"  onclick="toggle_visibility('sideshow');">
<strong>Sideshow Acts</strong></a>
<div class="toggle" id="sideshow">
<p>
<br />
<a href="acts.php?page=swordswallowing">Sword Swallowing</a><br />
<a href="acts.php?page=bedofnails">Bed of Nails / Bed of Glass</a><br />
<a href="acts.php?page=blockhead">Human Blockhead / Mental Floss</a><br />
<a href="acts.php?page=glasseating">Glass Eating</a><br />
<a href="acts.php?page=straitjacket">Strait Jacket / Tennis Racquet Escapes</a><br />
<a href="acts.php?page=swordswallowing">Sword Ladder</a><br />
<a href="acts.php?page=razorblades">Razor Blade Eating</a>
</p>
</div><!--sideshow-->
<br />
<br />

<a href="java script:;"  onclick="toggle_visibility('specialty');">
<strong>Specialty Acts</strong></a>
<div class="toggle" id="specialty">
<p>
<br />
<a href="acts.php?page=caricature">Caricature</a><br />
<a href="acts.php?page=balloons">Balloon Twisting</a><br />
<a href="acts.php?page=facepainting">Face Painting</a><br />
<a href="acts.php?page=statue">Mimes / Human Statues</a><br />
<a href="acts.php?page=magic">Magicians / Illusionists</a><br />
<a href="acts.php?page=horrorclown">Horror Clown</a><br />
<a href="acts.php?page=divination">Divination (Tarot, Palm Reading, Crystal Ball, etc)</a>
</p>
</div><!--specalty-->

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

// hide all toggle sections when page is loaded:
var div=document.getElementsByTagName('div');
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].style.display='none';
    }
}
</script>

</div><!--e main-->

And the act-xxxx.php page:

CODE

<img src="act-photos/balloons.jpg" height="586" width="390" alt="" />
<script type="text/javascript">toggle_visibility('specialty'); </script>

[Christian J]

Is the code still sloppy? Any help cleaning it up would be appreciated!

The Validator (see link above) reports a few errors since you mix XHTML and non-XHTML syntax. If you use an HTML5 Doctype most of these will go away, OTOH you can use this site's validator for HTML5 (use the one at http://validator.w3.org for HTML5). This is mostly an inconveninence though, otherwise there should be no practical consequences.

CODE

<p style="width:400px;">

It's usually more practical to avoid inline styles, use embedded or external stylesheets instead.

CODE

A show unlike any other, the Top Hat Side Show takes the one-of-a-kind spectacle of the circus sideshow and introduces it to a whole new market. For the first time, elegant galas, corporate events and family festivals can enjoy a sophisticated portrayal of some of the most death-defying and mystical performing arts found anywhere.
<br />
<br />
Combining high energy fire arts, spectacular circus acts, mind-bending illusions and seemingly impossible sideshow demonstrations, the Top Hat Side Show stretches the imagination, and inspires audiences to question the limits of human achievement.
<br />
<br />
</p>

The first two BR elements above could be replaced with one more P element. The last two perhaps by CSS margin or padding.

CODE

<a href="java script:;" onclick="toggle_visibility('more');">(Click here for logistics and options.)</a>

A pseudo-link like the above will not work without javascript. In fact, since the menus should stay open by default without javascript the link will not be needed then. Possibly you could create the link with javascript too, so it only appears when JS is enabled, but maybe that complicates things too much.

CODE

<br />
<br />
<strong>Top Hat School Show</strong><br />

The above text would be more semantically meaningful in a heading element (H1-H6), which should also improve search engine rankings slightly.

CODE

<br />
<br />
Mardi Gras<br />
Halloween<br />
Cirque<br />
Fire & Ice<br />
Horror / Dark Carnival<br />
Caberet<br />
<br />

The above would be more semantically meaningful as list (UL and LI elements), which should also improve search engine rankings slightly. It's good practice to use HTML entities:

CODE

&amp;

for ampersands.

And here's what I changed the original page to:

CODE

<a href="java script:;"  onclick="toggle_visibility('fire');">
<strong>Fire Acts</strong></a>

The above text would be more semantically meaningful in a heading element (H1-H6), which should also improve search engine rankings slightly. For example:

CODE

<h3 onclick="toggle_visibility('fire');">Fire Acts</h3>

(you may have to edit some CSS if you make changes like these).

CODE

<div class="toggle" id="fire">
<p>
<br />
<a href="acts.php?page=breathing">Breathing</a><br />
<a href="acts.php?page=eating">Eating</a><br />
<a href="acts.php?page=staff">Staff</a><br />
<a href="acts.php?page=poi">Poi</a><br />
<a href="acts.php?page=hoop">Hoop</a><br />
<a href="acts.php?page=fans">Fans</a><br />
<a href="acts.php?page=ropedart">Rope Dart</a>
</p>
</div><!--fire-->

The above could be made into a UL list.

CODE

<img src="act-photos/balloons.jpg" height="586" width="390" alt="" />

IMG elements should normally use non-empty ALT texts, unless the image is purely decorative (can't tell in this particular case). See also http://htmlhelp.com/feature/art3.htm