I’m trying to figure out why my script seems to be working in reverse. I have a page where there are hidden elements that will be shown when an image is clicked. The content should be hidden when the page is loaded, and only shown when the button is clicked. However, the page is loading with the content shown, and the images that are clicked actually hides the content,
The page is http://scope-stage.scholastic.com/issues/09_01_13/Narrative-Nonfiction and there are headings on the lower right hand side with images next to them (circles with “+” signs in them) One of those are “Complexity Factors”, and the grey sub headings under it is what should be hidden.
My jQuery script is:
<script>
$(document).ready(function()
{ $(‘div.hiddenComplexity’).show();
$(‘div.expandingBtn’).click(function()
{ $(this).next(‘div.hidden’).slideToggle(‘fast’);
return false; });
});
</script>
where .hiddenComplexity is the div that has the content that should be hidden under “Complexity Factors”, but it is showing instead, and hides when clicked (the opposite as intended). .expandingBtn is the name of the DIV that is clicked to show the hidden content. What am I doing wrong?
The slideToggle() should already do that (assuming you’ve made sure that all the DIVs have the class you expect them to have (“hiddenComplexity”, “hidden”, etc)).
It does, but it’s working backwards. The page loads with the div (.hiddenComplexity) shown, when it’s supposed to be hidden, and hides when I click the image. It should be hidden on page load and then shown when I click. Eventually I’ll have to have the expandBtn.png change to a circle with a minus sign on it, but that’s another issue. Right now I just want to figure out why my script is working backwards
