JQuery calling the function

Question

I am very new to Javascript/JQuery and I am going through the code of a colleague of mine. He has created the very common "FAQ" list on a website where the answer is not immediately displayed, only the question until the user clicks the arrow, it then shows the answer.

I am trying to figure out how he got this to work. I understand all the HTML and the CSS (it looks fine), but I can't seem to understand how to get the Jquery to work or where to call the code when the user press the arrow on the question to display the answer.

The code he seemed to use is at the bottom. Once again, all the HTML and CSS is linked up so I think it is a matter of simply how to use the code.

If anyone can offer any help, that would be appreciated.

Thanks!

$("#faq").on("click", "div > a", function() {
        return $(this).next().toggle().closest("li").toggleClass("arrow_up"), !1
    })

`$(this).next().toggle().closest("li").toggleClass("arrow_up")` - right there - it says find the next element from the one that was clicked on, toggle it's visibility, find the closest parental `li` and toggle the class "arrow_up" — tymeJV, Jul 31 '14 at 21:02
@tymeJV Thank you for the quick reply. Yes I figured that was happening, I am just confused where to put this code? In a regular script tag or when the page loads or...? — Teddy13, Jul 31 '14 at 21:04
It would go inside a DOM ready event `$(document).ready(function() {` -- or at the end of the `body` - all the above code is, is a handler on an `anchor` element. — tymeJV, Jul 31 '14 at 21:05

score 2 · Accepted Answer · edited May 23 '17 at 12:29

Let me annotate his code for you. It uses some shorthand that can be a little confusing for beginners.

// Select the element with an id attribute of "faq".
// When an <a> which is a first-level child of a div inside of
// #faq is clicked, perform the following actions
$("#faq").on("click", "div > a", function() {
        // "this" references the <a> tag.
        // $(this) wraps it in a jQuery wrapper
        return $(this) 
        // get the next sibling of the <a>. It is our <p>
        .next()
        // switches the element.style.display between none and block
        .toggle()
        // get the nearest parent <li> element.
        .closest("li")
        // add or remove the arrow_up CSS class 
        .toggleClass("arrow_up"), !1 // !1 is a shortcut for false
});

I have a full distilled and annotated reproduction in this jsFiddle link

He also uses a shorthand for return false as well. Notice that the body of his event handler is all on one line. He could have split it into two lines, but he used the comma operator to make it fit on just one.

$(this).next().toggle().closest("li").toggleClass("arrow_up");
return false; // false === !1;

Returning false from a jQuery event handler prevents the event from reaching parent elements in the DOM.

score 0 · Answer 2 · answered Jul 31 '14 at 21:07

That means:

//Bind a click function on every a tag in #faq

$("#faq").on("click", "div > a", function() {

// Toggle Class (so if the closest <li> Element has class "arrow_up" then remove it, otherwise add it)

return $(this).next().toggle().closest("li").toggleClass("arrow_up"), !1

Check out here for Example "Bootstrap Collapse" which is exactly the same you are looking for:

http://getbootstrap.com/javascript/#collapse

There is also a Demo Code provided and you see how to handle that.

JQuery calling the function

2 Answers2