JSFiddle - React, Tailwind, and code Playground

by Neo Aptt

HTML

<script src="http://demo.libguides.com/data/custom/1/jquery.columns.js"></script>
<div id='api_subjects_iid2189'></div><ul id="mylistid" class="mylist">
         <script src="http://api.libguides.com/api_subjects.php?iid=2189&amp;break=li&amp;incempty=false&amp;more=false&amp;format=js&amp;guides=true&amp;exclude_ids=78423,78424,78425,78426,78427,78428,78429,78430,78431,78432,78405,78406,78407,78408,78409,78410,78411,78412,78413,78414,78415,78416,78417,78418,78419,78420,78421,78422,42294,42285,42295,42296,42298,42291,42293,42299,42300,42301,42302,42303,42304,42306,42307,42309,42310,42312,42313,42314,42316,42317,42318,42320,42322,42323,42325,42326" type="text/javascript" id="myScript"></script></ul>

CSS

.column, .floatcols {
float: left;
width: 98%;
padding: 0;
margin: 0;
}

.column-wrapper {
overflow: hidden;
}

ul#mylistid{
width: 100%;
padding: 0;
}

li.subject_link {
padding:2px 0;
margin: 2px 6px;
list-style-type: none;
font-size: 0.8em !important;*/
}

li.subject_link:hover {
background: #eee;
cursor: pointer;
}

a.toggle_button {
text-decoration: none;
text-align: center;
color: #666;
background: #ddd;
border: 1px solid #ccc;
font-weight:bold;
margin: auto 6px auto 0;
padding:1px 3px;
display:inline-block;
width:15px;
cursor: pointer;
}

span.toggletext {
cursor: pointer;
}

ul.guide_links li {
margin:3px 3px 3px 26px;
list-style-type:disc;
}

ul.guide_links {
margin: 6px 0;
padding: 0;
line-height 1.5em; 
}

JavaScript

jQuery.noConflict();
(function($){
$(document).ready(function() {
$('#myScript').remove();
$('.mylist').columns({columns: 1}); 
// 'hide' function is called on each of the 'ul' elements with the class 'guide_links'
$('ul.guide_links').hide();
// DOM insert a link element inside of each of the subject list items.
$('li.subject_link').prepend('<a href="javascript://toggle guide links" class="toggle_button">+</a>');
// enable toggle action on each Subject LI
$('li.subject_link').bind("click", function(){
// toggles text in the link between '+' and '-'.
if($(this).children('a.toggle_button').text() == '+'){
$(this).children('a.toggle_button').text('-');
} else {
$(this).children('a.toggle_button').text('+');
}
// Toggle the child 'ul' element
$(this).children('ul.guide_links').slideToggle("fast");
});

$('a.subject_link_a').contents().unwrap();
$('a[href^="http://"]').not('a[href*=gusdecool]').attr('target','_blank');
});
})(jQuery);