bootstrap - открыть div под биркой

Question

У меня этот код. Я хочу иметь возможность открыть содержимое div прямо под тегом li a. Как это возможно?

FIDDLE

$(document).ready(function() { 
 
     $('.nav ul li:first').addClass('active'); 
 
     $('.tab-content:not(:first)').hide(); 
 
     $('.nav ul li a').click(function(event) { 
 
     event.preventDefault(); 
 
     var content = $(this).attr('href'); 
 
     $(this).parent().addClass('active'); 
 
     $(this).parent().siblings().removeClass('active'); 
 
     $(content).show(); 
 
     $(content).siblings('.tab-content').hide(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12"> 
 
    <div class=row> 
 
    <div class="col-xs-12"> 
 
     <div class="nav"> 
 
     <ul> 
 
      <li><a href="#a">Option A</a> 
 
      </li> 
 
      <li><a href="#b">Option B</a> 
 
      </li> 
 
      <li><a href="#c">Option C</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12"> 
 
     <div id="a" class="tab-content"> 
 
     <h2>Option A</h2> 
 
     <p>Option A</p> 
 
     </div> 
 
     <div id="b" class="tab-content"> 
 
     <h2>Option B</h2> 
 
     <p>Option B</p> 
 
     </div> 
 
     <div id="c" class="tab-content"> 
 
     <h2>Option C</h2> 
 
     <p>Option C</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

 var positioning = function ($li) { 
 
      if ($li.css('position') == 'relative') { 
 
       var pos = $li.position(); 
 
       $($li.find('a:first').attr('href')).css({ 
 
        position: "absolute", 
 
        top: pos.top + "px", 
 
        left: pos.left + "px" 
 
       }); 
 
      } 
 
     }; 
 
     $(document).ready(function() { 
 
      positioning($('.nav ul li:first').addClass('active')); 
 
      $('.tab-content:not(:first)').hide(); 
 
      $('.nav ul li a').click(function (event) { 
 
       event.preventDefault(); 
 
       var content = $(this).attr('href'); 
 
       $(this).parent().addClass('active'); 
 
       $(this).parent().siblings().removeClass('active'); 
 
       $(content).parents('.content').find('.tab-content').hide(); 
 
       positioning($(this).parent()); 
 
       $(content).show(); 
 
      }); 
 
     });

 @media (max-device-width: 479px) 
 
     { 
 
      .nav li.active { 
 
       position: relative; 
 
       min-height: 100px; 
 
      } 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12"> 
 
     <div class=row> 
 
      <div class="col-xs-12"> 
 
       <div class="nav"> 
 
        <ul> 
 
         <li> 
 
          <a href="#a">Option A</a> 
 
         </li> 
 
         <li> 
 
          <a href="#b">Option B</a> 
 
         </li> 
 
         <li> 
 
          <a href="#c">Option C</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-12 content"> 
 
       <div id="a" class="tab-content"> 
 
        <h2>Option A</h2> 
 
        <p>Option A</p> 
 
       </div> 
 
       <div id="b" class="tab-content"> 
 
        <h2>Option B</h2> 
 
        <p>Option B</p> 
 
       </div> 
 
       <div id="c" class="tab-content"> 
 
        <h2>Option C</h2> 
 
        <p>Option C</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>