On Click function with uknown ID

Question

I'm trying to write javascript that will will show/hide a paragraph when I click on an arrow. The catch is, I am generating a list of titles and next to each title is an arrow. This is generated through a loop on the server. When its passed the code has no ID. To solve that, I ran the following javascript to create ID's:

var countPosts = document.getElementsByClassName("jobs-article-holder-content-whole-teaser").length;
var myNewID = "article-holder-dropdown-"
for (var i = 0; i < countPosts; i++) {
    myNewID = "article-holder-dropdown-" + (i + 1);
    document.getElementsByClassName("jobs-article-holder-content-whole-teaser")[i].setAttribute("id", myNewID);
}

html is

loop
        <div class="jobs-article-holder-content-page">
            <div class="jobs-article-holder-content-whole">
                <div class="jobs-article-holder-content-whole-box">
                    <h3>$MenuTitle.RAW</h3>
                    <div class="job-article-holder-click-for-more-link">
                        &#x25B2;
                    </div>
                </div>
                <div class="jobs-article-holder-content-whole-teaser show">
                    <p class="jobs-article-holder-content-whole-teaser-content">$Teaser</p>
                </div>
            </div>
        </div>
end loop

To give you a visual: enter image description here

Now I'm trying to figure out how can I click on an arrow and have the content hide/show if I don't know the ID's. Any Idea's?

EDIT:

One thing I can't seem to get around is that the arrow is inside one div, where the paragraph is inside another, how do I change the arrow and hide the div, passing (this) can affect only the arrow, how can I go from there to affect the paragraph?

onclick="functionname(this);" pass it with reserved word 'this' — Gary Hayes, Aug 31 '14 at 05:58
ok but what will be the value of this? how will I know who this is? If you look, the arrow is in class job-article-holder-click-for-more-link while the paragraph is in another place, passing this doesn't help because I need to switch the arrow and hide the paragraph. — Bagzli, Aug 31 '14 at 06:01
You don't need to assign any ids at all. Bind a click handler to the container of the list, that tests whether `event.target` has the class of the arrow. If so, use `event.target.parentNode.nextSibling` (or similar DOM navigation) to get to the element you want to hide/show. — nnnnnn, Aug 31 '14 at 06:02
maybe (this) http://stackoverflow.com/questions/17060971/get-class-name-from-element-with-onclick helps you — caramba, Aug 31 '14 at 06:02
I'm not sure how that can work Gary, neither is the parrent. You have divs side by side, so .parent() will hide everything, I just want to hide the paragraph. So if I put onclick on the arrow,
arrow
paragraph
the parent will hide both divs, I need just paragraph to be hidden. — Bagzli, Aug 31 '14 at 06:10

score 4 · Accepted Answer · answered Aug 31 '14 at 06:13

Use CSS to control the show/hide of element:

.jobs-article-holder-content-whole-teaser.hide {
    display: none;
}

.jobs-article-holder-content-whole-teaser.show {
    display: block;
}

And take control of click with jQuery:

$(function () {
    $('.job-article-holder-click-for-more-link').on('click', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo.

If your elements generated by JavaScript, you need event delegation:

$(function () {
    $('body').on('click', '.job-article-holder-click-for-more-link', function () {
        $(this).closest('.jobs-article-holder-content-whole')
            .find('.jobs-article-holder-content-whole-teaser')
                .toggleClass('show hide');
    });
});

jsFiddle Demo.

@TJ The OP said that **This is generated through a loop on the server.**, however I've updated my answer to cover that if the elements generated by client. — dashtinejad, Aug 31 '14 at 06:18

score 1 · Answer 2 · answered Aug 31 '14 at 06:11

1

You can access the <p> as follows:

$(document).on("click",".job-article-holder-click-for-more-link",function(){
  $(this).parent().next().find("p");
}).

answered Aug 31 '14 at 06:11

T J

42,762
13
83
138

is .next() meaning go to the next div? – Bagzli Aug 31 '14 at 06:12
`next()` refers the next sibling. – T J Aug 31 '14 at 06:13
2

Pssst...@Bagzli this is the best answer... we were leading you to it, ROX just gave you the finished product. ;) – Gary Hayes Aug 31 '14 at 06:17

On Click function with uknown ID

2 Answers2