JQuery Question

[matthayzon89]

Hello all,
I have a loop in my website's code that pulls information from a database based on the words that the user has searched for in the search bar.

The results are displayed using a loop so all the divs essentially have the same 'id'.

I am trying to create a toggle sliding down 'expand' button for each entry that ONLY expands for one individual 'div' at a time.

How would I go about doing this?

I was able to create an 'expand' button on each div but when I click 'expand' it expands ALL hidden areas on ALL divs in the displayed results from the loop, b/c they all have the same 'id' name....

Is there a way around this?

[daveVk]

First I would give the divs a common class name, rather than a common id.

In the expand code try identify the correct div, relative to button being pressed, for example the div may follow the button. Post example of how button relates to div, and your expand code if you need more detail.

[matthayzon89]

A better explanation of this problem is in this diagram that I created:

[i56.tinypic.com...]

Its a lot easier to understand this way.

[daveVk]

$('.expandButton').click(

function( ev ) {
$(ev.target).closest('.DivContainingButtonAndExpandInfo').find('.expandInfo').toggle();
}

);

[matthayzon89]

Thank you a bunch. It works!

Can you please explain how the code works? I am quite new to jquery.

The .closest() <--did the trick :)

[daveVk]

The trick is to find the expandInfo NEAR the button.


ev.target is the button that was clicked.

$(ev.target).closest('.DivContainingButtonAndExpandInfo')

finds div containing the button ( and hopefully expandInfo )

.find('.expandInfo')

gets all expandInfo within found div ( hopefully one )

This way of doing NEAR allows you can change the layout as much as you like, provided expandInfo and the button stay within DivContainingButtonAndExpandInfo.

[Nika]

Could not find a relevant topic. This one says JQuery Question and I have one too :) What if I make a small block of text disappear onLoad from jquery? I don't want the text to show, but I'd like it to be there for a spider's sake. Will Google let it slide, or will it treat it as if it was color=background-color, which it doesn't like as we know?

[daveVk]

Nika,

The spiders should index this text OK, although there is speculation on Google understanding javascript to some extent.

Hiding seems legit for drop down menus etc, unless you go overboard it should be OK.

[Nika]

Yes, that's what I'm not at ease about - Google trying to understand javascript. No, it's not a drop down menu, it's in fact a hidden text that would be weird from a visitors point of view, but can be very useful if spiders read it - a mild case of spam, in fact. I did not want to hide it completely (background color, or a block panel over it) and if you mouseover a specific area on the page then the text shows. It's unlikely that anyone mouseover's that particular spot, that's for sure. This maneuver can be quite legitimate if you ensure that it's helpful for a viewer, meaning: it's obvious where to mouseover and the appearing text is useful. But that's for a human eye to determine whether the mouseover area is legitimately "accessible" or not, not for a bot. How is gonna a bot know that the mouseover spot has been pushed into an obscure corner of the page or not? It should be a legitimate maneuver for the Googlebot in any case. Well, that's just thoughts, I'm not gonna do it because sometimes I feel that Googlebot is indeed a human.
Anyway, thanks.