With my following code how to create simple filter using only CSS?

li items have opacity 0.1, how to make opacity 1 if radio buttons are checked? By default All Type radio button is checked, so all li items must have opacity 1. When other buttons are checked, how to change opacity accordingly?

CSS

.ff_items li
    {
        opacity: 0.1;
    }

HTML

<div class="filter"> 
    <input id="select_type_all" name="radio_set_1" type="radio" class="ff_selector_type_all" checked="checked" />
    <label for="select_type_all" class="ff_label_type_all">All</label>

    <input id="select_type_1" name="radio_set_1" type="radio" class="ff_selector_type_1" />
    <label for="select_type_1" class="ff_label_type_1">Web Design</label>

    <input id="select_type_2" name="radio_set_1" type="radio" class="ff_selector_type_2" />
    <label for="select_type_2" class="ff_label_type_2">Illustration</label>

    <input id="select_type_3" name="radio_set_1" type="radio" class="ff_selector_type_3" />
    <label for="select_type_3" class="ff_label_type_3">Icon Design</label>
</div>


<ul class="ff_items">
    <li class="ff_item_type_1">
        <div class="thumb">
            <div class="frame"><img src="work/thumb1.png" /></div>
            <div style="clear:both;"></div>             
        </div>
    </li>
    <li class="ff_item_type_2">
        <div class="thumb">
            <div class="frame"><img src="work/thumb2.png" /></div>
            <div style="clear:both;"></div>               
        </div>
    </li>
    <li class="ff_item_type_3">
        <div class="thumb">
            <div class="frame"><img src="work/thumb3.png" /></div>
            <div style="clear:both;"></div>             
        </div>
    </li>
</ul>

I have tried that but not working for me.

Can anyone want to help with writing code, please?

Plz help

Member Avatar
diafol

Well, just a bit of js (jQ). I wouldn't advise using a library just for this, but here's a lazy solution...

<!doctype html> 
<html>
<head>
</head>
<body>

<div class="filter"> 
    <input id="select_type_all" name="radio_set_1" type="radio" data-id="0" checked="checked" />
    <label for="select_type_all">All</label>
    <input id="select_type_1" name="radio_set_1" type="radio" data-id="1" />
    <label for="select_type_1">Web Design</label>
    <input id="select_type_2" name="radio_set_1" type="radio" data-id="2" />
    <label for="select_type_2">Illustration</label>
    <input id="select_type_3" name="radio_set_1" type="radio" data-id="3" />
    <label for="select_type_3">Icon Design</label>
</div>
<ul class="ff_items">
    <li data-id="1">
        <div class="thumb">
            <div class="frame"><img src="http://fishingguidewales.co.uk/SwanseaBay.jpg" width="100" /></div>
            <div style="clear:both;"></div>             
        </div>
    </li>
    <li data-id="2">
        <div class="thumb">
            <div class="frame"><img src="http://fishingguidewales.co.uk/SwanseaBay.jpg" width="100" /></div>
            <div style="clear:both;"></div>               
        </div>
    </li>
    <li data-id="3">
        <div class="thumb">
            <div class="frame"><img src="http://fishingguidewales.co.uk/SwanseaBay.jpg" width="100" /></div>
            <div style="clear:both;"></div>             
        </div>
    </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(".filter input[type=radio]").change(function()
    {
        var id = $(this).data('id');
        if(id == 0)
        {
            $(".ff_items img").css('opacity', 1);   
        }else{
            $(".ff_items img").css('opacity', 0.1);
            $(".ff_items li[data-id="+id+"] img").css('opacity', 1);    
        }
    });
</script>

</body>
</html>

I played around with it for awhile, and I just don't see a way of doing this with pure CSS. You're going to need javascript to change those LI tags when checkboxes are clicked. Unless CSS has some kind of conditional code I'm not aware of. Something like:[if (#select_type_1:checked)] .ff_item_type_1{opacity:1;}