JQuery Toggle Implementation

JavaScript
1

http://rafflebananza.com/Header/Header.html

Please click on the advanced search and choose ‘Charitable Cause’ option’. Each .category has inside a link to the id of the content which must be shown on a slide toggle and at the same time I would like .category .toggle.open/.toggleclose to toogle class.

How can I achieve this?

2

Got it all working now apart from the first and last toggles.

3

Sorry man, but I can’t even find the advanced search.

Would it happen to be one of the mystery icons along the top row? Hovering on them doesn’t show anything, and the destination url shown at the bottom of the screen when hovering on them doesn’t reveal anything either.

I’m not going to just randomly click on things hoping to stumble across the right one either - just like a real user.

There is a magnifying glass and binoculars, but which is what? How am I to find the advanced search option that you want us to use?

4

It’s the binoculars, the magnifier is basic search.

5

Cheers. There’s a mis-spelling there too, in “search out websirte for” - but onwards . . .

With the first one that doesn’t work, you don’t have an identifier called SearchForContent

With the last one that doesn’t work, you don’t have an OpenContent section, so the script doesn’t know what you want to do there.

Both can be fixed by fixing your HTML code.

6

This is a latest edit to try and resolve, previously the script was just looking for the a href.

Updated live view for you to see.

$('.CharitableCauses .category').click(function() {
	var child = $(this).find('.OpenContent').find("a").attr("href");
	$(this).find('.toggle').toggleClass('open closed');
	$(child).slideToggle('fast');
});

My script does not look for ‘SearchForContent’

7

Pardon, that was a slip of the keyboard.

It should be SearchForContent

Your link is:

<a href="#SearchForCharity"></a>

So that the script can find and use content based on the identifier called SearchForCharity

Currently you do not have one of those. Instead, you have:

<li class="SearchForCharity">

Which needs to be an identifier instead.

So in summary - fix your HTML code and things should go well for you.

8

Just resolved this!

<li class="SearchForCharity">

Needed to be

<li ID="SearchForCharity">

And the last <a href didn’t have #…