0

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>
3
Contributors
4
Replies
22
Views
4 Years
Discussion Span
Last Post by Phaelax
0

I have tried that but not working for me.

Can anyone want to help with writing code, please?

Plz help

0

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>
0

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;}

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.