Show/Hide Toggle Switch for multiple Divs

Nancy Strong · #1 11-03-2011, 06:45 PM

I know this has absolutely nothing to do with Studio Press and designing a website but I need some help. I am using Streamline 3.0 with Wordpress 3.2.1.

I am not good with javascript and I got this off the internet. It is the one javascript code that worked the way I wanted it to work. The problem is, if I publish the page and someone clicks on the page then wants to go to another page, it won't allow them to go anywhere else on the website. You are stuck. So you have to close the window, which I don't want to happen.

What comes up in a box is: "As you can see, the link no longer took you to jquery.com"

Could someone look at this code and tell me what I need to do to change it so you can navigate throughout the website?

Here is the page URL. I do not have this page on any of the nav bars because of this problem.
http://artandcuisineadventures.com/r...nce=57b12d204c

Here is the code:

Code:

<p style="text-align: center;"><span style="color: #996600; font-size: 20px;"><em><strong>Here are some recipes that we know you will enjoy!</strong></em></span></p>
<p style="text-align: center;"><span style="color: #000066; font-size:18px;"><strong>Click on the Recipe you would like to see!</strong></center></span></p>
<h5>Salads</h5>
<h4>Spinach Salad with Spicy Tomato Vinaigrette</h4><div class="toggle">
<p>Serves 4 (with plenty of vinaigrette left over)
<table border="0"width="100%"align="left">
<tbody>
<tr>
<td>Salad</td>
</tr>
<tr>
<td>8 cups spinach, tender, your and washed</td>
</tr>
<tr>
<td>4 eggs, hard boiled, peeled and crumbled (I prefer sliced)</td>
</tr>
<tr>
<td>8 ounces smokey bacon, Slab Edwards of Surry, Virginia, cooked and roughly chopped</td>
</tr>
<br/>
<tr>
<td>Spicy Tomato Vinaigrette</td>
</tr>
<tr>
<td>½ cup ketchup</td>
</tr>
<tr>
<td>½ cup apple cider vinegar</td>
</tr>
<tr>
<td>½ cup sugar, granulated</td>
</tr>
<tr>
<td>¼ cup honey</td>
</tr>
<tr>
<td>1 teaspoon kosher salt</td>
</tr>
<tr>
<td>1 Tablespoon black pepper, freshly ground</td>
</tr>
<tr>
<td>¾ cup blend oil (90% canola, 10% extra virgin olive oil)
</td>
</tr>
</tbody>
</table>
<p>In a saucepan over medium heat, gently warm ketchup, vinegar, sugar, and honey until sugar dissolves. Transfer to a blender or Vitamix, add salt and pepper. Turn on blend and slowly add oil as it emulsifies.</p>
<p>To finish, place the spinach, bacon, hard cooked egg and liberally dress with the spicy tomato vinaigrette. Season with a pinch of salt and enjoy at once.</p>
</div>
<h5>Main Dishes</h5>
<h4>Mom's Swiss Meatloaf</h4><div class="toggle">
<table border="0"width="100%"align="left">
<tbody>
<tr>
<td>1 lb. Ground Beef</td>
</tr>
<tr>
<td>Crumbled Crackers</td>
</tr>
<tr>
<td>1 Diced Onion</td>
</tr>
<tr>
<td>1 Egg</td>
</tr>
<tr>
<td>Tomato Sauce</td>
</tr>
<tr>
<td>Grated Swiss Cheese</td>
</tr>
<tr>
<td>Caraway Seed</td>
</tr>
<tr>
<td>Salt and Pepper</td>
</tr>
</tbody>
</table>
<p>Put ground beef into bowl, add enough crumbled crackers to hold together, onion, egg, 1 half can of tomato sauce, and plenty of cheese. (Swiss cheese was usually pretty expensive when we were kids so Mom put in whatever kind of cheese she had in the refrigerator.) Place this in the oven at 350º for about 1 hour. This meal goes well with a nice baked potato!</p>
</div>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
    </script>
  </body>
</html>
<pre class="sh_javascript"><code>
<script type="text/javascript">
<!--
// this tells jquery to run the function below once the DOM is read
$(document).ready(function() {

// choose text for the show/hide link
var showText="Show";
var hideText="Hide";

// append show/hide links to the element directly preceding the element with a class of "toggle"
$(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// change the link depending on whether the element is shown or hidden
if ($(this).html()==showText) {
$(this).html(hideText);
}
else {
$(this).html(showText);
}

// toggle the display
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

//-->
</script>
</code></pre>

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Show/Hide Categories	hseitz	General Discussion	1	01-03-2009 02:08 PM