How to select the second Class element using jQuery working with Spock/Geb

Question

I have done a lot of research to find out the answer for the following to no avail.

I have the following class in one <div> tag in the HTML.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f7592388723hsjd73hd' data-toggle='collapse'>

And I have few more classes within few other <div> tags but they use the same class name.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f75032f23104747ed753c' data-toggle='collapse'>

By Default, the first <div> is expanded and all the other <div> are collapsed. I need to be able to click on the second and reveal thee other buttons and controls that are hidden.

I tried the following but it didn't work.

expandOrderLink(wait:true)  { $(".btn.btn-navbar.document-collapse.pull-right:nth-child(2)") }

Is there a way we can look for all the class elements with the same name and choose the one we need (in my case the second one).

Also note that I cannot use any other attributes since have dynamic content with encrypted info (such as #document_521f75032f23104747ed753c)

Answer 1

try something like this

  $(".btn.btn-navbar.document-collapse.pull-right").eq(1);