I need help with my jQuery code. I was able to make it work for the read more and read less script, but I am unable to make it work on javascript code or vanilla js code. I hope you can help me with my issue.

Below are my code for Jquery that works:

 <div class="short-desc">I am a short description preview</div>
 <div class="full-desc" style="display:none">I am a full version preview</div>

        <a href='#' class='read-more'>View More</a>
        
         <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <script>
    jQuery( function( $ ) {
        $(document).ready(function() {
            $( ".read-more" ).on( "click", function(e) {
                e.preventDefault();
                if ($(".short-desc").is(':visible')){
                  $(".short-desc").hide();
                  $(".full-desc").show();
                  $(this).text("View less");
                }
                else{
                  $(".short-desc").show();
                  $(".full-desc").hide();
                  $(this).text("View more");              
                }
                
            });
        });
    });     
    </script>

I’m trying to convert the jQuery code to JavaScript or VanillaJS code, but it’s not working. Below are the javascript code I make but I can’t replicate how the jQuery function work. NOTE: I am adding this to a different div id

    <div id="short-desc">I am short description</div>
        <div id="full-desc" style="display:none">I am full description</div>

        <a href='#' onclick="myFunction()">View More</a>
        
        


<script type="text/javascript">
function myFunction() {
  var x = document.getElementById("full-desc");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

const paragraph = document 
                .getElementById('short-desc'); 
            const currentVisibility = window 
                .getComputedStyle(paragraph).visibility; 
  
            if (currentVisibility === 'hidden') { 
                paragraph.style.visibility = 'visible'; 
            } else { 
                paragraph.style.visibility = 'hidden'; 
            }
</script>