Click here to Skip to main content
14,695,439 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
when load page default first radio button information has to display but it is not doing like that 1st radio button is checked and all the reimaging radio button information also showing i want to show the one at time and 1st one should be shown when the page loads please help me

What I have tried:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
    <div class="wrapper">
            <div class="service-icon1 box one">
               <img src="images/images-1-2-100x100.jpg" alt="" class="client-img" >
            </div> 
            <div class="service-icon1 box two">
               <img src="images/krueger-carmen.jpg" alt="" class="client-img" >
            </div> 
            <div class="service-icon1 box three">
               <img src="images/hurdbig-100x100.jpg" alt="" class="client-img" >
            </div> 
        <label ><input type="radio" name="colorRadio" value="one" checked></label>
        <label><input type="radio" name="colorRadio" value="two" ></label>
        <label><input type="radio" name="colorRadio" value="three" ></label>
    </div>
    <div class="content">
        <div class="box one">
            <p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi omnis quisquam aliquid voluptatum sapiente provident.</p>
                <h3><a href="#" style="text-decoration:none;">Mark</a> </h3>
                <span>CEO</span>
        </div>
        <div class="box two">

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aliquid sapiente nisi? Recusandae, repudiandae culpa? Explicabo culpa necessitatibus recusandae modi.</p>
                <h3><a href="#" style="text-decoration:none;"> Lee</a></h3>
        </div>
        <div class="box three">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, perferendis.</p>
                <h3><a href="#"style="text-decoration:none;">Stefan</a> </h3>
        </div>
    </div>

<script type="text/javascript" src="Demo.js"></script>



</center>



<script type="text/javascript">
$(document).ready(function(){
  
    $('input[type="radio"]').click(function(){
      var inputValue = $(this).attr("value");
      var targetBox = $("."+ inputValue );
      $(".box").not(targetBox).hide();
      $(targetBox).show();
    });
  });
</script>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900