Show list depending class (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>
                                    <a href="{{value.url}}" class="product-img"><img src="{% thumbnail value.base_image.url 150x150 product_zoook.png %}" title="{{value.name}}" /></a>
                                </div>

                            <div style="width: 420px; float: left; height: 15px; overflow: hidden;"><a href="{{value.url}}" class="product-name" alt="{{value.name}}" title="{{value.name}}"><h2>{{value.name}}</h2></a></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;">
                                <a href="{{value.url}}" class="product-name" alt="{{value.name}}" title="{{value.name}}"><img style="height: 22px; float: left; margin-top: 7px;" src="../../../../static/images/info_ico.png" /></a>
                                </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 %}
                        <a href="{% if categories_path or tag %}?{% else %}{{ request.path }}?q={{q}}&{% endif %}page={{ product_products.previous_page_number }}">{% trans "Previous" %}</a>
                    {% endif %}
                    <span class="current">
                        {% trans "Page" %} {{ product_products.number }} DE {{ product_products.paginator.num_pages }}
                    </span>
                    {% if product_products.has_next %}
                        <a href="{% if categories_path or tag %}?{% else %}{{ request.path }}?q={{q}}&{% endif %}page={{ product_products.next_page_number }}">{% trans "Next" %}</a>
                    {% 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.