CODEWITHSUNDEEP
alpine.js
Elavarasan R
Elavarasan R

Reputation: 3

Show / hide Div Sections based on radio box in Alpine Js

Here I attached Jquery code is working perfectly. But I need this code in ALpine js. If I choose radio check , We need to show div cantent based on check box

$(document).ready(function() {
   $("div.desc").hide();
   $("input[name$='Victim']").click(function() {
    var test = $(this).val();
      $("div.desc").hide();
      $("#" + test).show();





     <h3> Who was involved in this incident? </h3>

<p><label><input name="Victim" type="radio" value="Guest" required >Guest </label></p>
<div id="Guest" class="desc">
    <p><strong>Guest</strong> questions here ...</p>
     </div>
<p><label><input name="Victim" type="radio" value="Employee" > Employee </label</p>
    <div id="Employee" class="desc">
        <p><strong>Employee</strong> questions here ...</p>
         </div>
      
  <p><label><input name="Victim" type="radio" value="Vendor" > Vendor</label></p>
  <div id="Vendor" class="desc">
    <p><strong>Vendor</strong> questions here ...</p>
     </div>

Upvotes: 0

Views: 2353

Answers (1)

Dauros
Dauros

Reputation: 10502

It's very easy, just define one variable: victim, use it on the radio inputs via x-model, then use x-show to show/hide content based on the selection.

<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<div x-data="{victim: 'Guest'}">
<h3> Who was involved in this incident? </h3>

<p><label><input name="Victim" type="radio" value="Guest" x-model="victim">Guest </label></p>
<div id="Guest" class="desc" x-show="victim == $el.id">
  <p><strong>Guest</strong> questions here ...</p>
</div>
     
<p><label><input name="Victim" type="radio" value="Employee"  x-model="victim">Employee </label</p>
<div id="Employee" class="desc" x-show="victim == $el.id">
  <p><strong>Employee</strong> questions here ...</p>
</div>
      
<p><label><input name="Victim" type="radio" value="Vendor"  x-model="victim">Vendor</label></p>
<div id="Vendor" class="desc" x-show="victim == $el.id">
 <p><strong>Vendor</strong> questions here ...</p>
</div>
     
</div>

Upvotes: 5

Related Questions