<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" /> <ul class="tabsInnerRight"> <!-- <li><a href="#tab1">Tab1</a></li> <li><a href="#tab2">Tab2</a></li> <li><a href="#tab3">Tab3</a></li> <li><a href="#tab4">Tab4</a></li> <li><a href="#tab5">Tab5</a></li> <li><a href="#tab6">Tab6</a></li> --> <li><a href="#synopsis">Synopsis</a></li> {% ifnotequal sessions|length 0%} <li><a href="#talks">Talks</a></li> {% endifnotequal %} {% ifnotequal documents|length 0%} <li><a href="#prereading">Pre-Reading</a></li> {% endifnotequal %} {% ifnotequal imagegallery|length 0 %} <li><a href="#gallery">Gallery</a></li> {% endifnotequal %} {% ifnotequal participants|length 0 %} <li><a href="#participants">Participants</a></li> {% endifnotequal %} <!-- <li><a href="#comments">Comments</a></li> --> </ul> <div class="tab_container"> <div id="synopsis" class="tab_content"> {{ meeting.intro }} <!--Content--> </div> {% ifnotequal sessions|length 0 %} <div id="talks" class="tab_content"> <h4 class="tabTitle">Programme</h4> <div> {% for s in sessions %} <div class="session"> <div class="sessionTitle toggleNext"> {{ s.title|title }} </div> <div class="sessionChild"> <div class="sessionIntro"> {{ s.intro|linebreaksbr }} </div> {% ifnotequal s.talks|length 0 %} <ul class="talks"> {% for talk in s.talks %} <li> <span class="talkIcons"> {% for d in talk.documents %} <span class="talkIcon"> <a href="/static/{{d.file}}" target="_blank"> <img src="/static/images/PDFIcon.jpg" title="<span class='ttTitle'>Download: {{d.title}}.</span> <br /><span class='ttIntro'>{{d.intro}}</span>" /> </a> </span> {% endfor %} {% for a in talk.audio %} <span class="talkIcon"> <a href="/static/{{a.file}}" target="_blank"> <img src="/static/images/Audio.jpg" title="<span class='ttTitle'>Listen: {{a.title}}.</span><br /><span class='rightclickHelp'>(Right click and select 'Save Link As' to download)</span>" /> </a> </span> {% endfor %} {% for v in talk.video %} <span class="talkIcon"> <a href="/static/{{v.file}}"> <img src="/static/images/VideoIcon.jpg" title="<span class='ttTitle'>Video: {{ talk.title }}.</span><span class='rightclickHelp'>(Right click and select 'Save Link As' to download)</span>"> </a> </span> {% endfor %} </span> {{ talk.title }} by {{ talk.presenter }} </li> {% endfor %} </ul> {% endifnotequal %} </div> </div> {% endfor %} </div> </div> {% endifnotequal %} {% ifnotequal documents|length 0%} <div id="prereading" class="tab_content"> <h4 class="tabTitle">Reading Materials</h4> <div> {% for d in documents %} <div class="objWrapper"> <div class="readingMatTitle"> <a href="/static/{{d.file}}">{{d.title}}</a> </div> <div class="intro"> {{ d.intro }} </div> </div> {% endfor %} </div> </div> {% endifnotequal %} {% ifnotequal imagegallery|length 0 %} <div id="gallery" class="tab_content"> <h4 class="tabTitle">Gallery</h4> <div> {% load thumbnail %} {% for i in imagegallery %} {% thumbnail i.file "600x500" crop="center" as big %} {% thumbnail i.file "100x100" crop="center" as thumb %} <a href="{{ big.url }}" title="{{i.title}}" class="thickbox" rel="gall"> <img src="{{ thumb.url }}" /> </a> {% endthumbnail %} {% endthumbnail %} {% endfor %} </div> </div> {% endifnotequal %} {% ifnotequal participants|length 0 %} <div id="participants" class="tab_content"> <h4 class="tabTitle">Participant List</h4> <div> {% for p in participants %} <div class="pWrapper"> <div class="pName toggleNext"> <a href="Javascript:return false;">{{ p.name }}</a> </div> <div class="pBio"> {{ p.short_bio }} </div> </div> {% endfor %} </div> </div> {% endifnotequal %} </div> <script type="text/javascript"> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabsInnerRight li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabsInnerRight li").click(function() { $("ul.tabsInnerRight li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script>