this my code. how to do when i click the link floor and spec, the content will shown, just like how the other content shown?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>

<script type="text/javascript"> 
 $(document).ready(function () {
     $('.hidable').hide();
  
  $('.imgbtn').click(function(){
                target = $(this).attr('data-target');
                $(".link:nth-child(" + target + ")").click();
            });

     $('.link').click(function () {
         $(this).toggleClass('active')
         $('.link').not(this).removeClass('active')
         var show = $(this).attr('rel');
         $('.hidable').not(show).slideUp('fast');
         $(show).slideDown('fast');
        return false
     }).eq(2).click()
 });

        </script> 
    </head> 
    <body> 
    
    <ul> 
     <li class='link' rel='#div1'><a href="#">1</a></li> 
     <li class='link' rel='#div2'><a href="#">2</a></li> 
     <li class='link' rel='#div3'><a href="#">3</a></li> 
     <li class='link' rel='#div4'><a href="#">4</a></li> 
     <li class='link' rel='#div5'><a href="#">5</a></li> 
  </ul> 
    
    <div id="boxes">       
     <div class='hidable' id='div1'>div1</div>
     <div class='hidable' id='div2'><a href="#floorplan">floor</a><a href="spec">Spec</a></div>
     <div class='hidable' id='div3'>div 3</div> 
     <div class='hidable' id='div4'>div 4</div>
     <div class='hidable' id='div5'>div 5</div> 
<div id="floorplan"></div>
<div id="spec"></div>
 </div>
 
</body>
</html>
like this:
Picture 1.png