<div>
I understood the requirement was for the toggle function not the click function
</div>


I understood the requirement was for the toggle function not the click function

<div>
Actually did it a little different but both answers helped me.
</div>


Actually did it a little different but both answers helped me.

<div>
<div class="content wysiwyg-content">
I have this HTML:<br />

<pre><code id="code-10-27417369-1">&lt;li id=&quot;toggle&quot;&gt;
  &lt;a href=&quot;/store/customer/account/logout/&quot;&gt;Logout&lt;/a&gt;
  &lt;a id=&quot;close&quot; style=&quot;display: none;&quot; class=&quot;close&quot; href=&quot;#&quot;&gt;Close Panel&lt;/a&gt;
&lt;/li&gt;</code></pre>
Sometimes the first anchor will be like this:<br />
&nbsp; &lt;a id=&quot;open&quot; class=&quot;open&quot; href=&quot;#&quot;&gt;Log In | Create Account&lt;/a&gt;<br />
<br />
I have a click event to toggle the wording like this:<br />

<pre><code id="code-10-27417369-2">// Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function(event) {
  event.preventDefault(); 
  $(&quot;#toggle a&quot;).toggle();
});</code></pre>
How would I trigger the toggle() only when the first anchor has an id = 'open'?
</div>
</div>


I have this HTML:
(CODE)
Sometimes the first anchor will be like this:
  <a id="open" class="open" href="#">Log In | Create Account</a>

I have a click event to toggle the wording like this:
(CODE)
How would I trigger the toggle() only when the first anchor has an id = 'open'?

Toggle only certain anchor

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.