JSFiddle - React, Tailwind, and code Playground

By clicking on one heading, all target blocks toggle. Expand All/Collapse All Searchable Items

by Sergio Sánchez

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h1>
Testable Start
</h1>
<div class="row">
  <div class="col-md-7">
    <input style='width:100%' data-bind="value: keyword, valueUpdate: 'afterkeydown', event: { keyup: search}" type="text" />
  </div>
  <div class="col-md-5">
    <input type='checkbox' />
    <span>PRIMARY ONLY</span>
  </div>
</div>
<div>
  <span class="clickable" data-bind="click:expandAll">EXPAND ALL</span>
  <span> | </span>
  <span class="clickable" data-bind="click:collapseAll">COLLAPSE ALL</span>
</div>


<div class="panel-group" data-bind="foreach: dataItems">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="accordion-toggle collapsed panel-title" data-toggle="collapse" data-bind="attr: { 'data-target': '#categoryCollapse'+categoryId}, text:name">            
             </h4>
    </div>
    <div data-bind="attr: { id: 'categoryCollapse'+categoryId}" class="panel-collapse collapse">
      <div class="panel-body">
        <!-- Primary/Secondary START -->
        <div class="panel-group">
          <!-- First Panel -->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="accordion-toggle collapsed panel-title" data-toggle="collapse" data-bind="attr: { 'data-target': '#primaryDataitemsCollapse'+categoryId}">
                Primary Data Items
             </h4>

            </div>
            <div data-bind="attr: { id: 'primaryDataitemsCollapse'+categoryId}" class="panel-collapse collapse">
              <div class="panel-body">
                <!-- Primary Accordion START -->
                <div class="panel-group" data-bind="foreach: primaryDataItems">
                  <div class="panel panel-default">
            ...

CSS

.panel-title:hover {
  cursor: pointer;
}

.clickable:hover {
  cursor: pointer;
}

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings';
  /* essential for enabling glyphicon */
  float: left;
  margin-right: 5px;
  content: "\e114";
  /* adjust as needed, taken from bootstrap.css */
}

.panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e080";
  /* adjust as needed, taken from bootstrap.css */
}

JavaScript

const jsonData = [{
  name: 'SBS',
  categoryId: 1,
  description: 'This is the sbs description',
  primaryDataItems: [{
    id: 1,
    name: 'DataItem1',
    description: 'This is the dataitem1 description',
  }, {
    id: 2,
    name: 'DataItem2',
    description: 'This is the dataitem2 description',
  }, {
    id: 3,
    name: 'DataItem3',
    description: 'This is the dataitem3 description',
  }, ],
  secondaryDataItems: [{
    id: 4,
    name: 'DataItem4',
    description: 'This is the dataitem4 description',
  }, {
    id: 5,
    name: 'DataItem5',
    description: 'This is the dataitem5 description',
  }, {
    id: 6,
    name: 'DataItem6',
    description: 'This is the dataitem6 description',
  }, ]
}, {
  name: 'CAS',
  description: 'This is the CAS description',
  categoryId: 2,
  primaryDataItems: [{
    id: 7,
    name: 'DataItem7',
    description: 'This is the dataitem7 description',
  }, {
    id: 8,
    name: 'DataItem8',
    description: 'This is the dataitem8 description',
  }, {
    id: 9,
    name: 'DataItem9',
    description: 'This is the dataitem9 description',
  }, ],
  secondaryDataItems: [{
    id: 10,
    name: 'DataItem10',
    description: 'This is the dataitem10 description',
  }, {
    id: 11,
    name: 'DataItem11',
    description: 'This is the dataitem11 description',
  }, {
    id: 12,
    name: 'DataItem12',
    description: 'This is the dataitem12 description',
  }, ]
}]

function DataItemManagerViewModel(data) {
  var self = this;
  self.dataItems = data;
  self.keyword = ko.observable("fdfdf");
  // Hay que sacar de aqui el expandAll
  self.expandAll = function() {

    $('.panel-collapse').collapse('show');

  };
  self.collapseAll = function() {

    $('.panel-collapse').collapse('hide');

  };
  self.search = function(data, event) {  	
  	console.log (this.keyword());    
  }; 

}

const dimViewModel = new DataItemManagerViewModel(jsonData);
ko.applyBindings(dimViewModel);