Hello everyone, I don’t understand something about how best to create and make clickable sort buttons, as in this screenshot.

Namе and Percentagе are connected by radio buttons, that is, you can choose one or the other - either Name or Percentage .

enter image description here

  • Do you already have any code for clarity? - Zoltan Toth
  • I would generally suggest the idea I would write myself just for the time being, I don’t really understand how to do it correctly, as I understand it, through the radio, a loaf is done and you need to stylize it and hang up an event that will work on onSelected - is it? - user3319778
  • Not necessarily the radio. You also need to sort in both directions - ascending and descending, and how will you do it from the radio, if it is ALREADY selected? - Zoltan Toth
  • one
    for example jsfiddle.net/gabrieleromanato/eJf55 (instead of ASk Desk to put the arrows), or there are plugins tablesorter.com/docs , tinysort.sjeiti.com - HamSter

2 answers 2

Triangles can be made using css. Store the state using the checkbox (you can also register an event for it to catch a click). To add arrows, use :before and :after pseudo-classes. You can attach a click on the arrows by applying pseudo-classes to the 'label', which refers to the checkbox by id .

In this option, you can do without scripts to switch the state of the arrows, however, it took me two additional pseudo-classes to switch.

Perhaps this option will suit you.

 $('#stateInput').change(function() { console.log('This value is now: ' + $(this).prop('checked')); }) 
 div { font-size: 20px; } .arrows { position: relative; cursor: pointer; } #stateInput { display: none; } #stateInput + .arrows:after { content: ' '; position: absolute; left: 10px; bottom: -16px; border: 10px solid transparent; border-top: 10px solid green; border-width: 12px 7px; } #stateInput:checked + .arrows:after { content: ' '; position: absolute; left: 10px; bottom: -16px; border: 10px solid transparent; border-top: 10px solid gray; border-width: 12px 7px; } #stateInput + .arrows:before { content: ' '; position: absolute; left: 10px; bottom: 12px; border: 10px solid transparent; border-bottom: 10px solid gray; border-width: 12px 7px; } #stateInput:checked + .arrows:before { content: ' '; position: absolute; left: 10px; bottom: 12px; border: 10px solid transparent; border-bottom: 10px solid green; border-width: 12px 7px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> Some text <input type="checkbox" id="stateInput"> <label for="stateInput" class="arrows"></label> </div>

Added by
With button styling

 $('#stateInput').change(function() { console.log('This value is now: ' + $(this).prop('checked')); }) 
 .button { position: relative; font-size: 20px; text-decoration: none; display: inline-block; border: 1px solid green; color: green; } .button:active { color: gray; background: #eee; } .button > .arrows { position: relative; cursor: pointer; display: block; padding: 8px 10px; padding-right: 30px; } .button > input { display: none; } #stateInput + .arrows:after, #stateInput + .arrows:before { content: ' '; position: absolute; right: 10px; border: 10px solid transparent; } #stateInput + .arrows:after { bottom: -6px; border-top: 10px solid green; border-width: 12px 7px; } #stateInput + .arrows:before { top: -6px; border-bottom: 10px solid gray; border-width: 12px 7px; } #stateInput:checked + .arrows:before { border-bottom-color: green; } #stateInput:checked + .arrows:after { border-top-color: gray; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="button"> <input type="checkbox" id="stateInput"> <label for="stateInput" class="arrows">Some text</label> </a>

  • Thank you very much Andrew! very cool work! - user3319778

 $('button').on('click', function() { $(this).hasClass('desc') || $(this).hasClass('asc') ? $(this).toggleClass('asc desc') : $(this).addClass('desc'); }); 
 button { background: #fff; border: 1px solid #eee; cursor: pointer; overflow: hidden; padding: .75em 2.25em .75em 1em; position: relative; } button:before, button:after { border-style: solid; border-width: 8px 5px; border-color: transparent; content: ''; height: 0; position: absolute; right: 10px; width: 0; } button:before { border-bottom-color: #ccc; top: 0; } button:after { border-top-color: #ccc; bottom: 0; } .asc:before { border-bottom-color: #777; } .desc:after { border-top-color: #777; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="name">Name</button> <button id="perc">Percentage</button>

  • Thanks Zoltan, it looks cool! - user3319778