jcadima
7/23/2015 - 4:50 PM

HIDE/ SHOW Content Tab

HIDE/ SHOW Content Tab

new_gist_file.html
content_copyfile_download


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bitnami: Open Source. Simplified</title>
<link href="bitnami.css" media="all" rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!--  Navigation , hide/show tabs need # on href -->
<a href="/main" rel="main_tab">Main Tab</a>
<a href="#" rel="qa_tab">QA Tab</a>
<a href="#" rel="media_tab">Media Tab</a>

<div class="some_other_content">
  abcdde
  12334
  xyz0123
</div>


<!--  START - FAQ CONTENT  -->
<div id="qa_tab" class="tab-pane active accordion-content" style="display: none">
  <div class="editor-content" >
  {{ project.project_faq }}
  </div>
</div>
<!--  END  - FAQ CONTENT   -->


<!--  START - MEDIA CONTENT  -->
<div id="media_tab"  class="tab-pane active accordion-content" style="display: none">
  <div class="editor-content" >
  {{ project.project_media }}
  </div>
</div>
<!--  END  - MEDIA CONTENT   -->

</body>

<script>
// this will hide all siblings DIVs that are not currently clicked,
// ex: click on qa_tab , will hide all other DIVs (which are siblings)
$(document).ready(function () {
    $('a').on('click', function(){
       var target = $(this).attr('rel');
       $("#"+target).show().siblings("div").hide();
    });
});
</script>

</html>