How to set display none on tag using css?


Tags:
html,css,html-lists,zen-cart

Problem :

I want that my categorybox display only subcategory

like

main category
subcategory 1
    subcategory 1_1
    subcategory 1_2
    subcategory 1_3
subcategory 2
    subcategory 2_1
    subcategory 2_2
subcategory 3
subcategory 4

I want to display like this

subcategory 1
subcategory 2
subcategory 3
subcategory 4

This is my HTML code and i am hide the parent category using css but i am not understood how can i hide the Shop by Brand and Concentrated Powders under   Herbal Products

<div class="sideBoxContent" id="categoriesContent">
       <a href="index.php?main_page=index&amp;cPath=2" class="category-top">
             <span class="category-subs-parent">Product</span>
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_4" class="category-subs">&nbsp;&nbsp;Accupuncher Niddels 
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7" class="category-subs">
            <span class="category-subs-parent">&nbsp;&nbsp;Herbal Products</span>
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7_9" class="category-products">&nbsp;&nbsp;&nbsp;&nbsp;Concentrated Powders
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_7_8" class="category-products">&nbsp;&nbsp;&nbsp;&nbsp;Shop by Brand
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_10" class="category-products">&nbsp;&nbsp;Magnets, Pellets &amp; Tapes
       </a>
       <br>
       <a href="index.php?main_page=index&amp;cPath=2_3" class="category-products">&nbsp;&nbsp;New Arrival
       </a>
       <br>
<hr id="catBoxDivider">
</div>

My css like this

A.category-subs, A.category-subs:visited {

    color: #FF0000;

    text-decoration: none;

    }

    A.category-products, A.category-products:visited
    {
        display: none;
    }

but i am not get proper out put because it hide all the category-products and i want that it just hide only two as i mention above

Thanks in advance



Solution :

Is this zen cart? If so i have just been through a similar issue myself creating a new categories menu where subcats appear on hover. I used the flyout categories menu (additional module - http://www.zen-cart.com/downloads.php?do=file&id=1290 ) which generates the categories subcats as a nested ul as suggested in comments, this is for zen cart 1.5 but similar things are available for older versions. if you delete the javascript, this one will work fine without animation and you can easily hide the elements you want to.

The only way I can think of to do it with the html you have is to use some jquery, you could then select a certain element and hide them that way. for example

$("#categoriesContent a:nth-child(4)").css('display','none');

to hide concentrated powders. But this would obviously go wrong if you added a category as the index of the elements would be altered. I suppose you could get round this instead by looping through the a elements with .each(), get their content with .html() of the a links to compare it to a particular string, eg, 'Concentrated powders' but this would get complicated and it would be much easier to change the html. In short I think you need to rethink your approach and check out the advanced categories mod or edit the current categoies template file which you will find in includes/templates/default_template/sideboxes/tpl_categories.php copy to your template directory and edit - ask another question if you need help with that.


    CSS Howto..

    How to keep the underline effect in this demo stay using CSS?

    How can I expand this picture to cover the width of my page?

    How to hide autofill safari icon in input field

    How can i align the text in center of a row in css?

    How to center two square blocks in page?

    how to use css align control one row

    How to apply properties to 3 types of input on HOVER?

    Some doubts about how exactly grid BootStrap component work? [closed]

    how to accomplish this border effect in css?

    How to precisely center bootstrap grid in html page?

    How to make text input in table cell grow beyond the limits of the table when selected?

    How can I use d3.js filter to assign different css classes to elements?

    How to delete first pseudo after

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How do I get the codes of creating the sidebar from this website? [closed]

    How to segment a circle with different colors using CSS

    How to clear css cache

    how do I get my background to stretch the entire page

    How to add css files to a custom module in Odoo 8?

    How to change hover background on links in css?

    JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

    How to draw a checkmark / tick using CSS?

    How to align image as pseudo element?

    How to force a TD to be a certain height with CSS?

    How to set minimum height for a div?

    How to remove css property from last child element?

    How are CSS elements combined

    How to make a custom clickable shape with CSS to cover the exact needed area?

    How to create a fluidic list using css