<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- main container Begin --> <div class="widget-content" id="pubsubs-maincontainer" onload="function pubsubs_global_function()"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-1"><button type="button" class="btn btn-link btn-xs" id="pubsubs-showall">Show All</button></div> <div class="col-md-1"><button type="button" class="btn btn-link btn-xs" id="pubsubs-viewsource">View Source</button></div> </div> <!-- publication section Begin --> <div class="pubsubs-group"> <div class="pubsubs-heading"> <a class="pubsubs-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#pubsubs-publications"> <div class="pubsubs-change-icon glyphicon glyphicon-plus"><h3>Publications</h3></div></a></div> <div id="pubsubs-publications" class="pubsubs-body collapse"> <div class="pubsubs-inner"> <div class="pubsubs-raw"> <!-- publications body Begin--> %allpublications% <!-- publications body End --> </div> </div> </div> </div> <!-- publication section End --> <!-- subscription section Begin --> <div class="pubsubs-group"> <div class="pubsubs-heading"> <a class="pubsubs-toggle collapsed" data-toggle="collapse" data-parent="toggle" href="#pubsubs-subscriptions"> <div class="pubsubs-change-icon glyphicon glyphicon-plus"><h3>Subscriptions</h3></div></a></div> <div id="pubsubs-subscriptions" class="pubsubs-body collapse"> <div class="pubsubs-inner"> <div class="pubsubs-raw"> <!-- subscriptions body Begin--> %allsubscriptions% <!-- subscriptions body End --> </div> </div> </div> </div> <!-- subscription section End --> <div id="pubsubs-plaintext"></div> </div> </div> </div> <!-- main container End -->

.pubsubs-change-icon H3 {display: inline; margin-left:5px;} .hr{margin:5px 0;} .pubsubs-group{margin-bottom:20px;border-radius:0;} .pubsubs-toggle{ background:rgb(227, 251, 252); } .pubsubs-toggle:hover{ text-decoration: none; } .pubsubs-heading .pubsubs-toggle { display: block; padding: 10px 10px; } .selectStyle{ width:46%; float: left; margin-right: 8%; } .pubsubs-group{ margin-bottom:10px; }

function pubsubs_toggle_function(element){ console.log($('#pubsubs-showall').text()) var has = $(element); var findelement = has.find('.pubsubs-change-icon'); if(findelement.hasClass('glyphicon-plus')) { findelement.removeClass('glyphicon-plus'); findelement.addClass('glyphicon-minus'); } else if(findelement.hasClass('glyphicon-minus')) { findelement.removeClass('glyphicon-minus'); findelement.addClass('glyphicon-plus'); } } function pubsubs_toggle_click_function() { pubsubs_toggle_function($(this)); } $('.pubsubs-toggle').on('click', pubsubs_toggle_click_function); $('#pubsubs-showall').on('click', function(event) { if ($('#pubsubs-showall').text() == 'Show All') {$('#pubsubs-showall').text('Hide All'); $('#pubsubs-maincontainer .collapse').collapse('show'); $('#pubsubs-maincontainer .pubsubs-toggle .pubsubs-change-icon').removeClass('glyphicon-plus').addClass('glyphicon-minus'); } else {$('#pubsubs-showall').text('Show All'); $('#pubsubs-maincontainer .collapse').collapse('hide'); $('#pubsubs-maincontainer .pubsubs-toggle .pubsubs-change-icon').removeClass('glyphicon-minus').addClass('glyphicon-plus'); } }); $('#pubsubs-viewsource').on('click', function(event) { var str = ""; if ($('#pubsubs-viewsource').text() == 'View Source') { $('#pubsubs-viewsource').text('View Html'); $('#pubsubs-maincontainer .pubsubs-group').hide(); if(!$('#pubsubs-plaintext').hasClass("pubsubs-filled")) { $('#pubsubs-maincontainer .pubsubs-inner .pubsubs-raw').each(function(){ str = str + $(this).html();}); $('#pubsubs-plaintext').html(str); $('#pubsubs-plaintext').addClass('pubsubs-filled'); } $('#pubsubs-plaintext').show(); } else { $('#pubsubs-viewsource').text('View Source'); $('#pubsubs-maincontainer .pubsubs-group').show(); $('#pubsubs-plaintext').hide(); } });