Simple Information Comparability With Solvyy Responsive Desk

The Solvyy responsive desk provides a easy but efficient technique to show comparative knowledge to your customers.

The tabular format clearly presents the important thing variations between two merchandise, companies, or ideas. 

Constructed with HTML, CSS, and JavaScript (jQuery). Runs completely on each desktop and cell gadgets.

The right way to use it:

1. Insert your services or products names into an HTML record.

<ul>
  <li class="bg-purple energetic">
    <button>Conventional Chatbots</button>
  </li>
  <li class="bg-blue">
    <button>Solvvy</button>
  </li>
</ul> 

2. Add the comparative knowledge into an HTML desk.

<desk id="solvvy_comparison_table">
  <thead>
    <tr>
      <th class="cover"></th>
      <th class="default">Conventional Chatbots</th>
      <th class="">Solvvy</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>24/7 Protection</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Sooner Decision Time</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Correct Solutions with actual AI & NLP</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Finish-to-Finish Reporting & Analytics</td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Quick Time to ROI</td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Low Complete Price of Possession</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Omni-Channel Assist & Clever Routing</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Customizable by Persona</td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>on-Model Experiences</td>
      <td class="default"><span class="tick">&#10006;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
  </tbody>
</desk>

3. The mandatory CSS kinds.

ul {
  show: flex;
  high: 0px;
  z-index: 10;
  padding-bottom: 14px;
}

li {
  list-style: none;
  flex: 1;
}

li:last-child {
  border-right: 1px strong #dddddd1f;
}

button {
  width: 100%;
  border: 1px strong #dddddd1f;
  border-right: 0;
  border-top: 0;
  padding: 10px;
  background: #FFF;
  font-size: 14px;
  font-weight: daring;
  peak: 60px;
  shade: #999
}

li.energetic button {
  background: #F5F5F5;
  shade: #000;
}

desk {
  border-collapse: collapse;
  table-layout: mounted;
  width: 100%;
}

th {
  background: #F5F5F5;
  show: none;
}

td,
th {
  peak: 53px
}

td,
th {
  border: 1px strong #dddddd1f;
  padding: 10px;
  empty-cells: present;
}

td,
th {
  text-align: left;
}

td+td,
th+th {
  text-align: heart;
  show: none;
}

td.default {
  show: table-cell;
}

.bg-purple {
  border-top: 3px strong #A32362;
}

.bg-blue {
  border-top: 3px strong #0097CF;
}

.sep {
  background: #F5F5F5;
  font-weight: daring;
}

.txt-l {
  font-size: 28px;
  font-weight: daring;
}

.txt-top {
  place: relative;
  high: -9px;
  left: -2px;
}

.tick {
  font-size: 18px;
  shade: #fff;
}

.cover {
  border: 0;
  background: none;
}

@media (min-width: 640px) {
  ul {
    show: none;
  }

  td,
  th {
    show: table-cell !essential;
  }

  td,
  th {
    width: 330px;
  }

  td+td,
  th+th {
    width: auto;
  }
}

desk#solvvy_comparison_table th {
  shade: #fff;
  font-size: 20px;
  background: #a470afe0;
}

desk#solvvy_comparison_table th:first-child {
  background: clear;
}

desk#solvvy_comparison_table td {
  background: rgb(164, 112, 175);
}

desk#solvvy_comparison_table td {
  padding: 20px;
  font-size: 15px;
}

desk#solvvy_comparison_table tr td:first-child {
  background: #592C85;
  shade: #fff;
  text-align: heart;
}

4. Load the required jQuery library proper earlier than the closing physique tag.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. Allow the responsive comparability desk.

$("ul").on("click on", "li", perform () {
  var pos = $(this).index() + 2;
  $("tr").discover('td:not(:eq(0))').cover();
  $('td:nth-child(' + pos + ')').css('show', 'table-cell');
  $("tr").discover('th:not(:eq(0))').cover();
  $('li').removeClass('energetic');
  $(this).addClass('energetic');
});

// Initialize the media question
var mediaQuery = window.matchMedia('(min-width: 640px)');

// Add a hear occasion
mediaQuery.addListener(doSomething);

// Operate to do one thing with the media question
perform doSomething(mediaQuery) {
  if (mediaQuery.matches) {
    $('.sep').attr('colspan', 5);
  } else {
    $('.sep').attr('colspan', 2);
  }
}
// On load
doSomething(mediaQuery);

Changelog:

2023-12-26

This superior jQuery plugin is developed by dostogircse171. For extra Superior Usages, please verify the demo web page or go to the official web site.