Отображать аккордеоны, только если поиск находит совпадение с использованием JQuery - PullRequest
Новая
       0

Отображать аккордеоны, только если поиск находит совпадение с использованием JQuery

0 голосов
/ 18 июня 2020

Newb ie Внимание! Будьте терпеливы, пожалуйста:

Вдохновленный отличной работой и помощью, предоставленной здесь @Oliver Trampleasure: Как искать среди вложенных аккордеонов, используя JS.

Я нашел решение того, над чем я работал, скопировал, использовал и адаптировал его сценарий (еще раз спасибо!), Однако единственное, что я пытался придумать, как изменить, - как я могу сделать все вопросы и ответы скрыты от пользователя, но при вводе в поле поиска, если результаты положительные, он просто показывает аккордеоны (вопрос и / или ответ, в зависимости от совпадения) с его форматированием и все?

Прямо сейчас Аккордеоны отображаются по умолчанию, а фильтры поиска показывают только те, которые содержат поисковый запрос. Я хотел бы скрыть аккордеон и отображать только в том случае, если поиск содержит допустимый термин.

1 Ответ

0 голосов
/ 18 июня 2020

Вы можете добавить класс, чтобы скрыть элементы, когда поисковый текст пуст.

См. Этот пример: 

.main-content .content ul,
.main-content .content ol {
  font-family: "Roboto", sans-serif !important;
  color: gray !important;
  overflow: auto;
  font-style: normal !important;
}

.box a:link {
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  text-decoration: none;
  color: rgb(0, 133, 213);
  letter-spacing: 2.5px;
}

.box a:hover {
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  text-decoration: none;
}

.box a:visited {
  color: rgb(0, 133, 213);
  text-decoration: none;
}

.box a:hover {
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
}

.box a:active {
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
}


/* HR styles */

hr.style-one {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(44, 113, 204, 0.5), rgba(0, 0, 0, 0));
}

hr.style-two {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

hr.style-3 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

hr.style-4 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

hr.style-5 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

hr.style-6 {
  border: 0;
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

hr.style-7 {
  border: 0;
  height: 1.5px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

hr.style-8 {
  border: 0;
  height: 2px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

hr.style-9 {
  border: 0;
  height: 2.5px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80%;
  flex-wrap: wrap;
  width: 100%;
}

.box {
  width: 140px;
  height: 140px;
  -webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  -moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  background-color: white;
  border-radius: 35px;
  transition: all 0.3s ease 0s;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1.5px;
  min-width: 1%;
  margin: 10px;
  text-align: center;
  color: rgb(0, 133, 213);
}

.box:hover {
  background-color: white;
  box-shadow: 0px 15px 20px rgb(0, 133, 213);
  color: white;
  transform: translateY(-7px);
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-78 {
  font-size: 24px;
  color: rgb(0, 133, 213);
}


/* buttons above */

.search-x {
  width: 60%;
  display: flex;
}

.searchTerm-x {
  width: 100%;
  border: 1.5px solid #008dd7;
  border-right: none;
  padding: 25px;
  height: 6px;
  border-radius: 10px 0 0 10px;
  outline: none;
  color: gray;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  -webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  -moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}

.searchTerm:focus {
  color: #008dd7;
}

.searchButton-x {
  width: 60px;
  height: 53px;
  border: 1px solid #008dd7;
  background: #008dd7;
  text-align: center;
  color: #fff;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 22px;
  -webkit-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  -moz-box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 1);
  box-shadow: 0px 10px 19px -6px rgba(100, 175, 212, 0.6);
}


/*Resize the wrap to see the search bar change!*/

.wrap-s {
  height: 100%;
  width: 100%;
  display: flex;
  display: flex;
  justify-content: center;
}

.search-x:hover {
  transform: translateY(-2px);
  transition: all 0.1s linear;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 "FontAwesome";
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: inherit;
  line-height: 1;
  font-family: FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.fa-search:before {
  content: "\f002";
}


/* TESTING SEARCH */


/* Styling to hide and show content on click */

.accordian-content {
  display: none;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: gray;
}

.accordian-element.active>.accordian-content {
  display: inherit;
}

.accordian-title {
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}


/* Styling for searching content and highlighting it */


/* Hide elements when search text is empty*/

.accordian-wrapper.hide .accordian-element {
  display: none;
}

.accordian-wrapper.searched .accordian-element {
  display: none;
}

.accordian-wrapper.searched .accordian-element.active {
  display: inherit;
}

.found-term {
  color: rgb(244, 152, 14);
}


/* Just some general styling to make it look nice */

.accordian-wrapper {
  display: flex;
  justify-content: center;
  border-left: 0px solid grey;
  border-top: 0px dashed grey;
}

.accordian-element {
  padding: 10px 0px 10px 20px;
  border-bottom: 0.5px solid lightgray;
}

.box-n {
  height: 100%;
  width: 50%;
  -webkit-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  -moz-box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  box-shadow: 0px 8px 15px 0px rgba(87, 84, 87, 1);
  background-color: white;
  border-radius: 0px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  align-items: left;
  justify-content: left;
  letter-spacing: 1.5px;
  min-width: 1%;
  margin: 10px;
  padding: 20px;
  text-align: left;
  color: rgb(0, 133, 213);
  flex-wrap: flex;
  flex-flow: column wrap;
  max-width: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrap-s">
  <div class="search-x">
    <input type="text" id="search" class="searchTerm-x" placeholder="What are you looking for?" value="">
    <button class="searchButton-x" type="submit">&nbsp;<i class="fa fa-search"></i>&nbsp;</button>
  </div>
</div>
<br>
<br>
<br>
<div class="wrapper">
  <div class="box"><a href="/100473-faq/lab-mgt-faq"><span class="material-icons md-78" id="accmanagement">&nbsp;account_box&nbsp;</span><br><br>Account Management</a></div>
  <div class="box"><a href="/100473-faq/lab-mgt-faq"><span class="material-icons md-78" id="labmanagement">supervisor_account&nbsp;</span><br><br>Group Management</a></div>
  <div class="box"><a href="/100473-faq/scheduling-faq"><span class="material-icons md-78" id="scheduling">&nbsp;event_available&nbsp;</span><br><br>Scheduling Resources</a></div>
  <div class="box"><a href="/100473-faq/service-requests-faq"><span class="material-icons md-78" id="servicerequest">&nbsp;snippet_folder&nbsp;</span><br><br>Service Requests</a></div>
  <div class="box"><a href="/100473-faq/billing-faq"><span class="material-icons md-78" id="billing">&nbsp;attach_money&nbsp;</span><br><br>Billing</a></div>
  <div class="box"><a href="/100473-faq/reporting-faq"><span class="material-icons md-78" id="reporting">&nbsp;insert_chart_outlined&nbsp;</span><br><br>Reporting</a></div>
  <div class="box"><a href="/100473-faq/core-settings-faq"><span class="material-icons md-78" id="coresettings">&nbsp;admin_panel_settings&nbsp;</span><br><br>Core<br>Settings</a></div>
  <div class="box"><a href="/100473-faq/others-faq"><span class="material-icons md-78" id="others">&nbsp;local_library&nbsp;</span><br><br>Others</a></div>
</div>
<br>
<br>
<br>
<hr class="style-one">
<br>



<!-- add hide class on initial load -->

<div class="accordian-wrapper hide">
  <div class="box-n">
    <p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);">&nbsp;HOT TOPICS&nbsp;</span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;">&nbsp;for&nbsp;</span>
      <span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
      </span>
    </p>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I add a lab/PI?</h4>
      <div class="accordian-content">

        <p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at the top left of the page and select My Groups, then enter the lab and Renan open the Gui Members tab. In this tab, at the bottom of
          the user list, they can click on the &#39;Link existing user&#39; button, to search for and add you to the lab group.</p>

      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I login?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I logout?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I poo?</h4>
      <div class="accordian-content">
        <p>Logging in is hard, you can loging at Renan '/login.html' or use a linked social media account.</p>
      </div>
    </div>
  </div>
  <div class="box-n">
    <p><span style="color: rgb(255, 255, 255); font-family: 'Roboto', sans-serif !important; font-size: 20px; line-height: 1px; background-color: rgb(250, 197, 28);">&nbsp;HOT TOPICS&nbsp;</span><span style="font-family: 'Roboto', sans-serif !important; font-size: 15px;">&nbsp;for&nbsp;</span>
      <span style="color: rgb(41, 105, 176);"><strong><span style="font-family: 'Roboto', sans-serif !important; font-size: 20px;">CORE ADMINS</span></strong>
      </span>
    </p>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I add a lab/PI?</h4>
      <div class="accordian-content">

        <p>Your PI or lab manager of the new lab will need to log into their account, click on the three vertical bars at Renan the top left of the page and select My Groups, then enter the lab and open the Members tab. In this tab, at the bottom of the
          user list, they can click on the &#39;Link existing user&#39; button, to search for and add you to the lab group.</p>

      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I login?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I logout?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
    <div class="accordian-element">

      <h4 class="accordian-title">How do I poo?</h4>
      <div class="accordian-content">
        <p>Logging in is easy, you can loging at '/login.html' or use a linked social media account.</p>
      </div>
    </div>
  </div>
</div>
<p>
  <br>
</p>

<p style="text-align: center;">Can&#39;t find your answer? <a href="/99561-contact-support/296444-support" title="">Contact us</a>.</p>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...