JQuery Toggle from 2 seperate Links - Image Prob
Hi,
I am having a problem with a toggle image trigger on my site.
I have 8 recipes (numbered 1 through 8) listed on a page which are hidden under a toggle trigger heading.
I also have links at the top to open the toggle heading too.
When either the top link is clicked, or the recipe heading clicked, the recipe shows in full.
My problem - I am a complete newby with JQuery, so have written the script out in a very long winded way - I'm sure there is a quicker way.
Secondly - when a browser opens a recipe from the top link part of the page, the toggle header image changes and the recipe is shown. Yet when you then 'hide' the recipe by clicking on the recipe toggle header instead of the top links, the image does not revert back.
Basically what I want to do, is show/hide the recipes from either the top link or the toggle header, triggering the same image class, so that a plus image shows when closed or a minus when open, irrespective of what link you click.
Can anyone help me on this one? I have tried so many methods and have run out of ideas now... Thanks!
Page:
http://www.essexgourmet.co.uk/recipes_test.php
Jquery Toggle Code:
-
$
(document).ready(function(){
$(".toggle_container").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
$("a.1").click(function(){
$(".toggle_container.#1").slideToggle("slow,");
});
$("a.1").toggle(function(){
$("h2.trigger.#recipe1").addClass("active");
}, function () {
$("h2.trigger.#recipe1").removeClass("active");
});
$("a.2").click(function(){
$(".toggle_container.#2").slideToggle("slow,");
});
$("a.2").toggle(function(){
$("h2.trigger.#recipe2").addClass("active");
}, function () {
$("h2.trigger.#recipe2").removeClass("active");
});
$("a.3").click(function(){
$(".toggle_container.#3").slideToggle("slow,");
});
$("a.3").toggle(function(){
$("h2.trigger.#recipe3").addClass("active");
}, function () {
$("h2.trigger.#recipe3").removeClass("active");
});
$("a.4").click(function(){
$(".toggle_container.#4").slideToggle("slow,");
});
$("a.4").toggle(function(){
$("h2.trigger.#recipe4").addClass("active");
}, function () {
$("h2.trigger.#recipe4").removeClass("active");
});
$("a.5").click(function(){
$(".toggle_container.#5").slideToggle("slow,");
});
$("a.5").toggle(function(){
$("h2.trigger.#recipe5").addClass("active");
}, function () {
$("h2.trigger.#recipe5").removeClass("active");
});
$("a.6").click(function(){
$(".toggle_container.#6").slideToggle("slow,");
});
$("a.6").toggle(function(){
$("h2.trigger.#recipe6").addClass("active");
}, function () {
$("h2.trigger.#recipe6").removeClass("active");
});
$("a.7").click(function(){
$(".toggle_container.#7").slideToggle("slow,");
});
$("a.7").toggle(function(){
$("h2.trigger.#recipe7").addClass("active");
}, function () {
$("h2.trigger.#recipe7").removeClass("active");
});
$("a.8").click(function(){
$(".toggle_container.#8").slideToggle("slow,");
});
$("a.8").toggle(function(){
$("h2.trigger.#recipe8").addClass("active");
}, function () {
$("h2.trigger.#recipe8").removeClass("active");
});
});
</script>
Toggle Header & Recipe Container:
-
<h2 class="trigger" id="recipe1"><a href="#">RECIPE TITLE TOGGLE HEADER</a></h2>
<div class="toggle_container" id="1">
<div class="block">
Top Links
-
<a href="#recipe1" class="1">RECIPE TITLE LINK</a>