Member Avatar for vizz

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
  • 242 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by Phaelax

Recommended Answers

All 4 Replies

Member Avatar for vizz

I have tried that but not working for me.

Can anyone want to help with writing code, please?

Plz help

Member Avatar for 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>
Member Avatar for Phaelax

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.