$('.content').hide(); $('.listelement').on('click', function() { if (!($(this).children('.content').is(':visible'))) { $('.content').slideUp(); $(this).children('.content').slideDown(); } else { $('.content').slideUp(); } }); $(function() { $('body').on('click', '.show', function() { css("display", "block"); }); $('body').on('click', '.list-group .list-group-item', function() { $(this).toggleClass('active'); }); $('.listarrows button').click(function() { var $button = $(this), actives = ''; if ($button.hasClass('move-left')) { actives = $('.list-right ul li.active'); actives.clone().appendTo('.list-left ul'); actives.remove(); } else if ($button.hasClass('move-right')) { actives = $('.list-left ul li.active'); actives.clone().appendTo('.list-right ul'); actives.remove(); } }); $('[name="SearchDualList"]').keyup(function(e) { var code = e.keyCode || e.which; if (code == '9') return; if (code == '27') $(this).val(null); var $rows = $(this).closest('.dual-list').find('.list-group li'); var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); $rows.show().filter(function() { var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); return !~text.indexOf(val); }).hide(); }); }); $(function() { var ctList = []; var ctRight = []; var $tBody = $("#La"); var $rbody = $("#accordian"); $.getJSON('https://api.myjson.com/bins/d6n2a', function(data) { data.topic_info.qt_ct_connection.map(value => { value.ct_list.forEach(CTLIST => { $tBody.append(`<li class="list-group-item" id="rl">${CTLIST.ct}<p> <a href="#demo_${CTLIST.ct}" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> <div id="demo_${CTLIST.ct}" class="collapse"> ${CTLIST.tts}, ${CTLIST.topic_level}, ${CTLIST.to_be_shown_individually}, ${CTLIST.check_for_geometry} </div> </p> </li>`); }); }) }) })
.ctList { padding-top: 20px; } .ctList .dual-list .list-group { margin-top: 8px; } .ctList .list-left li, .list-right li { cursor: pointer; } .ctList .list-arrows { padding-top: 100px; } .ctList .list-arrows button { margin-bottom: 20px; } /********************************/ /********************************/ /********************************/ /* ADD THIS */ .dual-list.list-left .well li.list-group-item p { display: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="ctList"> <div class="container"> <div class="row"> <div class="dual-list list-left col-6"> <div class="well text-right"> <div class="row"> <div class="col-md-10"> <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-search"> <i class="fa fa-search" aria-hidden="true" style="padding-right: 20px;"></i> </span> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> </div> </div> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> </div> <ul class="list-group" id="La"></ul> </div> </div> <div class="dual-list list-right col-6"> <div class="well"> <div class="row"> <div class="col-md-2"> <div class="btn-group"> <a class="btn btn-default selector" title="select all"> <i class="glyphicon glyphicon-unchecked"></i> </a> </div> </div> <div class="col-md-10"> <div class="input-group"> <input type="text" name="SearchDualList" class="form-control" placeholder="search" /> <span class="input-group-addon glyphicon glyphicon-search"></span> </div> </div> </div> <ul class="list-group" id="La"> <li class="list-group-item" id="rl">point_in_first_quad <p> <a href="#demo_point_in_first_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_point_in_first_quad" class="collapse"> 10, capable, true, true </div> <p></p> </li> <li class="list-group-item" id="rl">point_in_second_quad <p> <a href="#demo_point_in_second_quad" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_point_in_second_quad" class="collapse"> 10, capable, true, true </div> <p></p> </li> <li class="list-group-item" id="rl">trapezium_draw_slope_area_equ <p> <a href="#demo_trapezium_draw_slope_area_equ" class="btn btn-danger" data-toggle="collapse">Simple collapsible</a> </p> <div id="demo_trapezium_draw_slope_area_equ" class="collapse"> 20, strong, true, true </div> <p></p> </li> </ul> <form> <ul class="list-group" id="accordian"> <!-- right list --> </ul> <input type="submit" value="submit" name="submit"> </form> </div> </div> </div> </div> </section>