Div hide/show using radiobutton functionality using Jquery

Question

I have text & image wrapped in a div. Using Radiobutton the image & text should appear top & bottom. If you select image radiobutton, the icons should appear top & bottom and If you select Text radiobutton the text should appear top & bottom. I tried a few things but nothing worked. Please help me as I'm a beginner at this jquery. Below is my code.

$(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

You can use this JQuery code:

$(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();
      });   
});