javascript - Opacity on selected option -
i have toggle button allow user select 1 or 2 rows
so when user click on id remove or add class , show diferents rows, need add opacity on toggle button, how?, need show opacity on actual selected toggle button.
jquery("#one-row").click(function () { $('.product-list').removeclass('-two-columns'); $('.product-list').addclass('-one-columns'); }); jquery("#two-rows").click(function () { $('.product-list').removeclass('-one-columns'); $('.product-list').addclass('-two-columns'); });
.toggle-one{ background-image: url(images/toggle_1.svg); width: 30px; height: 10px; float: right; display: inline-block; cursor: pointer; } .toggle-two{ background-image: url(images/toggle_2.svg); width: 30px; height: 10px; float: right; display: inline-block; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle-rows" style="top: 118px; right: 30px; position: absolute;"> <nav> <ul> <li style="display: inline-block;"> <div class="toggle-one " id="onw-row"> </div> </li> - <li style="display: inline-block;"> <div class="toggle-two" id="two-rows"> </div> </li> </ul> </nav> </div>
i'd say, add 2 lines each buttons similar this:
jquery("#one-row").click(function () { $('.product-list').removeclass('-two-columns'); $('.product-list').addclass('-one-columns'); $("#one-row").css("opacity", "1"); $("#two-rows").css("opacity", "0.3"); }); jquery("#two-rows").click(function () { $('.product-list').removeclass('-one-columns'); $('.product-list').addclass('-two-columns'); $("#one-row").css("opacity", ".0.3"); $("#two-rows").css("opacity", "1"); });
Comments
Post a Comment