Show list depending class (Django) - django

Question

I have the following problem.
<div class="variable">
<ul class="1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul class="2">
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<ul class="3">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<ul class="4">
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
<ul class="5">
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul>
</div>
I need that when "variable" is for example "1" list only shows "1".
Is possible?
I need to display a list depending on the class of the DIV. The DIV class is variable, generates my system, but no problem, since the set as ordinary HTML.
Regards
UPGRADE
I'm use web in Django.
I have get a list of the ID of the category. I wanted to put that DIV ID in order to display only the list match that number.
As you comment that I can not use numbers, I have to use the name, the problem is that a category called "LOGITECH MICE" and the class does not allow me to put a space, any solution?
My Django template is:
{% load i18n %}
{% load thumbnail %}
{% load modules %}
{% module {category_decription|catalog.right} id="sidebar" class="block" %}
<div style="float:right; width: 700px; margin-right: 10px; margin-bottom: 10px;" id="slider">
<div><img border="0" src="/../../static/banners_productos/{{ query.id }}/01.jpg" ></img></div>
</div>
<style>
ul.marcas{
display: none;
}
div.SMARTPHONES ul{
display: none;
color: green;
}
div.SMARTPHONES ul.SMARTPHONES{
display: block;
}
div.FAX ul{
display: none;
color: green;
}
div.FAX ul.FAX{
display: block;
}
.fabricante { display: inline; }
</style>
<div style="background-color:#fff;" id="content">
<div id="catalog-category" class="block clearfix">
<!--div class="catalog-head"-->
<div class="toolbar toolbar-top">
<span style=" float: left;" class="view-mode">Productos : {{ values|length }}/{{ total }}</span>
<div class="items-pager">
<span class="items-drop"><select onchange="setLocation('paginator',this.value)">{% for item in paginator_items %}<option value="{{ item }}"{% if paginator_option == item %} selected="selected"{% endif %}>{{ item }}</option>{% endfor %}</select> Mostrar</span>
</div>
<!--div style="float: left; margin-left: 25px;"><span class="view-mode">Stock </span><a style="color:#1D9107;" href="?available=1">OK</a><a style="color:#f00;" href="?available=0">NO</a></div-->
<div class="items-sort">
<span class="sort-drop">Ordenar por
<select onchange="setLocation('order',this.value)">{% for order in catalog_orders %}<option value="{{ order }}"{% if order_option == order %} selected="selected"{% endif %}>{% trans order %}</option>{% endfor %}</select>
{% if order_by_option = 'desc' %}<a style="color:#fff; margin-left: 15px;" href="#" onclick="setLocation('order_by','asc')">Descendente<img style="height: 22px; float: right; margin-left: 4px; margin-right: 15px;" border="0" src="/../../static/asce.png" ></img></a>{% else %}<a style="color: #FFF !important; margin-left: 15px;" href="#" onclick="setLocation('order_by','desc')">Ascendente<img style="height: 22px; float: right; margin-left: 4px; margin-right: 15px; " src="/../../static/des.png" ></img></a>{% endif %}</span>
</div>
</div>
{% if values|length == 0 %}<p class="note-msg">{% trans "No existen productos en esta categoria." %}</p>{% endif %}
<!--/div-->
<!--div class="catalog-body"-->
<div style="height: 40px; margin-top: -10px; padding: 10px; height: 30px;" class="{{ query.name }}">
<ul class="marcas FAX">
<li class="fabricante">BROTHER</li>
</ul>
<ul class="marcas IMPRESORAS">
<li class="fabricante">HP</li>
<li class="fabricante">BROTHER</li>
<li class="fabricante">EPSON</li>
</ul>
<ul class="marcas SMARTPHONES">
<li class="fabricante">TP LINK</li>
<li class="fabricante">TENDA</li>
<li class="fabricante">{{ query.id }}</li>
</ul>
</div>
{% if mode_option == 'list' %}
<ul id="catalog-list">{% for value in values %}
<li id="product-{{value.product.id}}" class="product-item block clearfix">
<div class="product-detail">
<div>
<img src="{% thumbnail value.base_image.url 150x150 product_zoook.png %}" title="{{value.name}}" />
</div>
<div style="width: 420px; float: left; height: 15px; overflow: hidden;"><h2>{{value.name}}</h2></div>
<div style="width: 365px; float:left;">
<div style="height: 35px; float:left;"></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Ref: {{value.code}}</h2></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Part Number: {{value.variants}}</h2></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Categoria: {{ query.name }}</h2></div>
<div style="width: 110px; float: left;font-size: 10px;">
<img style="height: 22px; float: left; margin-top: 7px;" src="../../../../static/images/info_ico.png" />
</div>
</div>
<div style="width: 150px; float: right;">
{% if value.status %}
{% if value.product.available %}
<img style="height: 15px; margin-top: -16px; margin-left: 79px; margin-bottom: 14px;" src="../../../../static/images/ok.jpg" />
{% else %}
<img style="height: 15px; margin-top: -16px; margin-left: 79px; margin-bottom: 14px;" src="../../../../static/images/ok.jpg" />
{% endif %}
{% else %}
</div>
<div class="out-service ico border3b"><h3>{% trans "This product is out of service" %}</h3></div>
{% endif %}
{% if user.is_authenticated %}
<div id="product-price-{{value.product.id}}" class="price-box">
<span class="regular-price">
<span class="price3">
{% if currency_position == 'before' %}{{ currency }} {{value.price}}{% else %}{{value.price}} {{ currency }}{% endif %}
</span>
</span>
</div>
</div>
{% else %}
<a style="margin-right: 12px; width: 90px; float: right; height: 16px; padding: 5px; margin-top: 5px; background-image: url('/static/images/menu_pequeño/reg.jpg');" class="boton5" href="http://www.broadband-technologies.es/es/partner/login"><span style="padding-left: 20px;"></span></a>
{% endif %}
</li>{% endfor %}
</ul>
{% endif %}
<!--/div--></div>
{% if product_products.paginator.num_pages > 1 %}
<div id="paginator" class="pagination toolbar-bottom">
<span class="step-links">
{% if product_products.has_previous %}
{% trans "Previous" %}
{% endif %}
<span class="current">
{% trans "Page" %} {{ product_products.number }} DE {{ product_products.paginator.num_pages }}
</span>
{% if product_products.has_next %}
{% trans "Next" %}
{% endif %}
</span>
</div>{% endif %}
</div>
<!--/div-->
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.zproduct.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.fancybox-1.3.4.pack.js"></script>
{% if update_price and user.is_authenticated and values|length > 0 %}<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.zupdateprice.js"></script>{% endif %}
You may get a list of the categories? Easier ... to display only manufacturers that contain a category?
My main problem is this (that's why I ask the code).:
- I have a page in Django
- I products, categories and manufacturers.
- I want to take, when you are in a category, a list of manufacturers who have products in that category.
Best Regards

Answer 1

First of all - CSS class shouldn't be a pure integer. So I use letters in my answer since numbers doesn't work. Normally it should be something more descriptive though.
Define CSS rules like:
div.a ul{
display: none;
color: green;
}
div.a ul.a{
display: block;
}
div.c ul{
display: none;
color: red;
}
div.c ul.c{
display: block;
}
Here is the fiddle - http://jsfiddle.net/FC6vF/
The color rule is just to mark the difference in the fiddle and you can omit this.
For Django template - put this code:
{% for css_class in fancy_css_classes %}
div.{{ css_class }} ul{
display: none;
color: red;
}
div.{{ css_class }} ul.{{ css_class }}{
display: block;
}
{% endfor %}
inside <style>...</style> tag and pass the list of classes as a context variable fancy_css_classes from your view.