Hide/show div using radiobutton functionality using Jquery

Question

I have text & image wrapped in a div. Using Radiobutton the image & text should appear on the left & right. If you select left-icon radiobutton, the icons should appear left and If you select right-icon radiobutton the text should appear right. Below is the code. I got the below code from the same platform did a few changes. Thanks in advance

   $(document).ready(function(){
     
      $('input[type="radio"]').click(function(){
        let typeValue = $('input[name="box"]:checked').val();
        let directionValue = $('input[name="types"]:checked').val();
        $('.imagetop,.imagebottom,.texttop,.textbottom').hide();
        $('.' + typeValue + directionValue).show();
      });   
});

.texttop, .textbottom, .imagebottom{display:none;}
   
   .imagetop, .texttop{position: absolute; top: 9%; left: 50%;}
   
   .imagebottom, .textbottom {position: absolute;  bottom: 20%;left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <p >Type</p>
      <input type="radio" name="box" value="image" id="img" checked>
      <label for="image">Image</label>
      <br />
      <input type="radio" name="box" value="text">
      <label for="text">Text</label>      
    </div>  
    <div>
      <p >Direction</p>
      <input type="radio" id="top" name="types" value="top" checked>
      <label for="top">Top</label>
      <br />
      <input type="radio" id="bottom" name="types" value="bottom">
      <label for="bottom">bottom</label>      
    </div>
    
    
    <div class="imagetop" > 
        <img src="smiley.gif"  width="42" height="42" > 
        <span class="">top image</span>
      </div>
      <div class="imagebottom ">
        <img src="smiley.gif" width="42" height="42">
        <span class="">bottom image</span>
    </div>
    
    <div class="texttop">                           
        <span class="">top text</span>
      </div>
      <div class="textbottom ">                          
        <span class="">bottom text</span>
    </div>

Answer 1

• Wrap image , text and number inside <div class="wrapper"> and give it a data attribute to control the direction data-direction="top"
• Instead of using imagecenter , imagetop.... you can use only one element for image and give it a class="image" and the same thing for text and number
• Replace direction text to <span class="direction_text"></span> and we will change this direction text using js
• To show/hide the types we will use add/removeClass and will add this class to css display:block

$(document).ready(function(){     
  $('input[type="radio"]').on('change' ,function(){
    let typeValue = $('input[name="box"]:checked').val();
    let directionValue = $('input[name="types"]:checked').val();
    $(".direction_text").text(directionValue); // change `<span class="direction_text"` with direction
    $(".wrapper").attr("data-direction" , directionValue); // change `data-direction="top"` for wrapper to the new direction
    $('.show').removeClass("show"); // hide all types
    $('.' + typeValue).addClass("show"); // show the selected type
  }).change(); // run the change event onload  
});

.text , .number , .image{display:none;}
.text.show , .number.show , .image.show{display:block;}
   
.wrapper[data-direction="top"]{position: absolute; top: 9%; left: 50%;}

.wrapper[data-direction="center"]{position: absolute;  top: 25%;left: 50%;}
   
.wrapper[data-direction="bottom"]{position: absolute;  bottom: 20%;left: 50%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p >Type</p>
  <input type="radio" name="box" value="image" checked>
  <label for="image">Image</label>
  <br />
  <input type="radio" name="box" value="text">
  <label for="text">Text</label>    
  <br/>
  <input type="radio" name="box" value="number">
  <label for="number">Number</label>
</div> 
<div>
  <p >Direction</p>
  <input type="radio" id="top" name="types" value="top" checked>
  <label for="top">Top</label>
  <br />
  <input type="radio" id="bottom" name="types" value="bottom">
  <label for="bottom">bottom</label>    
  <br/>
  <input type="radio" id="center" name="types" value="center">
  <label for="center">center</label>
</div>

<div class="wrapper" data-direction="top">
  <div class="image" > 
    <button type=button>
    <img src="smiley.gif"  width="42" height="42" ><span class="direction_text"></span> image
    </button>
  </div>
  <div class="text">                           
    <span class=""><span class="direction_text"></span> text</span>
  </div>
  <div class="number ">                            
    <span class="">number <span class="direction_text"></span></span>
  </div>
</div>

Finally an Advice : While your code is running well and working as expected don't overthink of it .. Leave it and go to the next task and don't waste your time looking for a perfect code.. Later on you'll learn alot of things and you'll change your code by yourself with your own experience