i have code needs interate through categories , display items in respective category, code works fine after have added conditional if statement logic breaks jquery , first item hidden rather 2 in section.
code:
{% cat in categories %} <div class="panel-heading panel-collapse-trigger" id="category-{{ cat.id }}" style="background: #f5f5f5;border-color: #ffffff;"> <h4 class="panel-title" style="text-transform: uppercase;" onmouseover="this.style.color='#0c80df'" onmouseout="this.style.color=''"> <a class="link-text-color"><b>{{ cat.name }}</b></a> </h4> </div> {% in articles %} {% if all.category == cat.id %} <script> // show & hide categories $("#category-{{ cat.id }}").click(function() { if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') { // open category $(this).attr('class','panel-heading panel-collapse-trigger'); $("#{{ all.slug }}").slidedown(); }else{ // hide category (only closes 1 of items in category, due foreach loop?) $(this).attr('class','panel-heading panel-collapse-trigger collapsed'); //alert("{{ all.title }}"); $("#{{ all.slug }}").slideup(); } }); </script> output:
<div class="panel-heading panel-collapse-trigger" id="category-1" style="background: #f5f5f5;border-color: #ffffff;"> <h4 class="panel-title" style="text-transform: uppercase;" onmouseover="this.style.color='#0c80df'" onmouseout="this.style.color=''"> <a class="link-text-color"><b>annoucements</b></a> </h4> you can see here entire script being repeated, possibly problem?
<script> // hide categories $("#category-1").click(function() { if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') { // open category $(this).attr('class','panel-heading panel-collapse-trigger'); $("#welcome").slidedown(); }else{ // hide category (only closes 1 of items in category, due foreach loop?) $(this).attr('class','panel-heading panel-collapse-trigger collapsed'); //alert("welcome"); $("#welcome").slideup(); } }); </script> <li class="list-group-item" id="welcome"><a class="link-text-color" href="/article/welcome">welcome »</a></li> <script> // hide categories $("#category-1").click(function() { if($(this).attr('class') == 'panel-heading panel-collapse-trigger collapsed') { // open category $(this).attr('class','panel-heading panel-collapse-trigger'); $("#recent-updates").slidedown(); }else{ // hide category (only closes 1 of items in category, due foreach loop?) $(this).attr('class','panel-heading panel-collapse-trigger collapsed'); //alert("updates"); $("#recent-updates").slideup(); } }); </script> update: (the javascript category click function being duplicated same amount of times number of items in specific category)
example:
<script> // hide categories $("#category-1").click(function() { $(this).prop('class','panel-heading panel-collapse-trigger collapsed'); $("#welcome").slideup(); }); </script> <script> // hide categories $("#category-1").click(function() { $(this).prop('class','panel-heading panel-collapse-trigger collapsed'); $("#recent-updates").slideup(); }); </script> instead of:
<script> // hide categories $("#category-1").click(function() { $(this).prop('class','panel-heading panel-collapse-trigger collapsed'); $("#welcome").slideup(); $("#recent-updates").slideup(); }); </script>
to clarify comment, here code example :
{% category in categories %} <div class="collapsable-trigger" data-category-id="{{ category.getid() }}"> <h1>{{ category.getname() }}</h1> </div> {% endfor %} {% article in articles %} <article data-category-id="{{ article.getcategoryid() }}"> <h1>{{ article.gettitle() }}</h1> {{ article.getcontent() | raw }} </article> {% endfor %} <script> $(function() { $('.collapsable-trigger').on('click', function() { $('article[data-category-id="'+$(this).data('category-id')+'"]').toggle(); }); }); </script> 
Comments
Post a Comment