JS Bin

Add library

Add library
Run with JS
Save
Share
…

 
                     <div id="selectPatientCategories">
                            <div class="list-group">                                <h4>Select Doctor</h4>                                <hr>                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>                            </div>                       <div class="list-group">                                <h4>Select Doctor</h4>                                <hr>                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>                            </div>                    <div class="list-group">                                <h4>Select Doctor</h4>                                <hr>                                <a href="#" class="list-group-item">Dr. Justice Freedom</a>                                <a href="#" class="list-group-item">Dr. Martin Fabio</a>                                <a href="#" class="list-group-item">Dr. Jenny Walter</a>                                <a href="#" class="list-group-item">Dr. Loius Von Winkle</a>                                <a href="#" class="list-group-item">Dr. Mary McDoctors</a>                                <a href="#" class="list-group-item">Dr. Freethinker Liver</a>                                <a href="#" class="list-group-item">Dr. Cognitive Thinker</a>                            </div>                      </div>

 
 // Vanilla JS version of apply class "active" on click of .list-group-item
​    var listGroup = document.querySelectorAll('#selectPatientCategories .list-group');    //console.log(listGroup);​    var cats = document.querySelectorAll('a.list-group-item');    //console.log(cats);​    // For each category list group    var listGroupIndex = 0, listGroupLength = listGroup.length;    for (; listGroupIndex < listGroupLength; listGroupIndex++) {        var thisListGroup = listGroup[listGroupIndex];        //console.log(thisListGroup);​        // For each category list item        var catIndex = 0, catLength = cats.length;        for (; catIndex < catLength; catIndex++) {            var thiscat = cats[catIndex];            //console.log(listGroupIndex);​            // Click function on list item            thiscat.addEventListener('click', function () {                //console.log(thisListGroup);​                var thisListGroupCats = thisListGroup.querySelectorAll('a.list-group-item');                //console.log(thisListGroupCats);​                var rmcatIndex = 0, rmCatLength = thisListGroupCats.length;                //console.log(rmCatLength);                for (; rmcatIndex < rmCatLength; rmcatIndex++) {​                    rmthiscat = thisListGroupCats[rmcatIndex];                    //console.log(rmthiscat);​                    rmthiscat.classList.remove('active');                    this.classList.add('active');​                }​            }); // End click function        }    }

Output Auto-run JS

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x

Keyboard Shortcuts

Shortcut	Action
ctrl + [num]	Toggle nth panel
Require alt key, leaving cmd+1, 2 etc for tab switching.
ctrl + 0	Close focused panel
ctrl + enter	Re-render output. If console visible: run JS in console
Ctrl + l	Clear the console
ctrl + /	Toggle comment on selected lines
ctrl + ]	Indents selected lines
ctrl + [	Unindents selected lines
tab	Code complete & Emmet expand
ctrl + shift + L	Beautify code in active panel
ctrl + s	Save & lock current Bin from further changes
ctrl + shift + s	Open the share options
ctrl + y	Archive Bin
Complete list of JS Bin shortcuts

JS Bin URLs

URL	Action
/	Show the full rendered output. This content will update in real time as it's updated from the /edit url.
/edit	Edit the current bin
/watch	Follow a Code Casting session
/embed	Create an embeddable version of the bin
/latest	Load the very latest bin (/latest goes in place of the revision)
/[username]/last	View the last edited bin for this user
/[username]/last/edit	Edit the last edited bin for this user
/[username]/last/watch	Follow the Code Casting session for the latest bin for this user
/quiet	Remove analytics and edit button from rendered output
.js	Load only the JavaScript for a bin
.css	Load only the CSS for a bin
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.

public

Bin info

IAMtheIAMpro

20 Oct 2015

0viewers

JS Bin features

Pro features

Blog

Help

Donate to JS Bin ❤