How to change low level dom from top level button @click

[syedsimanta03]

The 2nd button working fine, But how can I toogle show/hide from the 1st button as well?

<button @click="isOpen = !isOpen">
Toggle

---

Toogle text

Toggle

<button @click="isOpen = !isOpen">
Toggle

---

Toogle text

Toggle

[ryangjchandler]

@syedsimanta03 Could you provide a better example of what you're trying to do in a CodePen please?

[syedsimanta03]

Just paste it to codepen and click on first button. I want the 1st button work like 2nd button for showing and hiding "Toggle Text". -------- Original message --------From: Ryan Chandler <[email protected]> Date: 12/08/2020 12:17 a.m. (GMT+06:00) To: alpinejs/alpine <[email protected]> Cc: syedsimanta03 <[email protected]>, Mention <[email protected]> Subject: Re: [alpinejs/alpine] How to change low level dom from top level button @click (#700) @syedsimanta03 Could you provide a better example of what you're trying to do in a CodePen please? —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe. [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "#700 (comment)", "url": "#700 (comment)", "name": "View Discussion" }, "description": "View this Discussion on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

[KevinBatdorf]

@syedsimanta03 You forgot to put your code snippet in a code block here.

I see you're on Discord though. It's not working because your click event is outside the div with x-data. Alpine will only look inside elements with that x-data attribute. A user on Discord gave you a solution:

<div x-data="{isOpen : false}">

  <button @click="isOpen = !isOpen">
      Toggle
  </button>
  <hr>

  <p x-show="isOpen">
    Toogle text
  </p>

  <button @click="isOpen = !isOpen">
    Toggle
  </button>
</div>