Forum - Such-Optionen filtern nach Mitglied=Autor / Such-Optionen ausblenden, Suchinformationen anzeigen

<style>
  .searchInfo h3 {padding: 5px 10px;}
  .searchBox { border-radius: 5px; margin: 5px 20px 15px 5px; color: {{global_link_fontcolor}}}
  .c_r_cont1 .searchBox ul, #wrap .searchBox ul { margin-left: 25px !important}
  .mbt #searchopts, #searchopts .boxheader,  #searchpage .ntit, #searchTop h2 {cursor:pointer;}
  .mbt #searchopts .card-header:hover  #searchCl, #searchopts .boxheader:hover #searchCl, #hideopts:hover, #searchTop h2:hover #searchCl, #searchpage .ntit:hover #searchCl {color: #aa0000 !important; font-weight:bold;}
  .mbt #searchCl {position: absolute; right:4px;}
  
  /* Breite Suchoptionen */
  #searchopts {width: 330px !important;}
  #searchClose {margin-bottom:15px; margin-left:0 !important;}
  #searchCl {padding:3px; font-weight:bold; float:right; font-size: 12px !important;}
  #searchOpen {display: none; font-weight: bold; margin-bottom:15px; cursor:pointer; }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
$('#search_sort:not(.card-body #search_sort)').after(`
  <div id="searchClose"><h3>Suchinformationen</h3></div>
 
  <div class="searchInfo">
    <div><h3>Mehrere Begriffe</h3></div>
    <div class="searchBox">
      <ul>
        <li>Um mehrere Begriffe zu suchen, können alle gesuchten Begriffe in das Suchfeld eingeben werden!
          <br>z.B.: <i>JavaScript HTML</i></li>
        <li>Es werden alle Inhalte mit <i>JavaScript</i> und <i>HTML</i> gefunden!</li>
      </ul>
    </div>
 
    <div><h3>Ausschluss von Begriffen</h3></div>
    <div class="searchBox">
      <ul>
        <li>Um einen Begriff auszuschließen, setze einfach ein "Minus"-Zeichen vor den auszuschließenden Begriff!
          <br>z.B.: <i>JavaScript HTML <br>-Kontaktformular</i></li>
        <li>Es werden alle Inhalte <i>mit JavaScript, mit HTML</i> und <i>ohne Kontaktformular!</i> gefunden!</li>
      </ul>
    </div>
 
    <div><h3>Wortstamm-Suche</h3></div>
    <div class="searchBox">
      <ul>
        <li>Die Suche findet auch Begriffe mit dem gleichen Wortstamm!
          <br> z.B.: <i>Beitrag</i></li>
        <li>Es werden alle Inhalte mit <i>Beitrag</i>, aber auch z.B. <i>beigetragen</i> oder <i>Beiträge</i> gefunden!</li>
      </ul>
    </div>
  </div>
`);
 
  $('.resulttd').prepend('<div id="searchOpen">Such-Optionen öffnen</div>');
  $('#searchres').before('<div id="searchOpen">Such-Optionen öffnen</div>');
  $('#searchopts .card-title, #searchopts .boxheader strong, #wrap #searchTop h2, #searchpage .ntit').append('<span id="searchCl">&#10005;</span>');
 
  $('#searchopts .card-title, #searchopts .boxheader, #hideopts, #searchTop h2, #searchpage .ntit').on('click', function(){
    $('#searchpage .resulttd').attr('style','padding-left: 0 !important;');
    $('#searchhelp, #searchopts, #showopts, #wrap #searchCl, #searchpage .ntit').hide();
    $('#searchhelp').closest('div.col').hide();
    $('#searchOpen').show(300);
    $('.mbt .firstrow.col-xl-8').attr('style','flex: 0 0 100% !important; max-width: 100% !important;');
 
    // Suchoption schließen: Speicherung setzen
    localStorage.setItem('SearchOpt','false');
  });
 
  $('#searchOpen').on('click', function(){
     $('#searchhelp, #searchopts, #wrap #searchCl, #searchpage .ntit').show(1000);
    $('#searchpage .resulttd').attr('style','padding-left: auto !important;').removeClass('nopadding');
    $(this).hide();
    $('.mbt .firstrow.col-xl-8').attr('style','');
 
    // Suchoption öffnen: Speicherung setzen
    localStorage.setItem('SearchOpt','true');
  });
 
  // Suchoptionen:  Speicherung auslesen und Funktionen auslösen
  if (localStorage.getItem('SearchOpt') == 'true'){ 
    $('#searchopts').addClass('toggledOpt').show();
    $('#searchOpen').hide();
  } else {
    $('#searchhelp, #searchopts, #wrap #searchCl, #searchpage .ntit').removeClass('toggledOpt').hide();
    $('#searchOpen').show();
    $('#searchpage .resulttd').attr('style','padding-left: 0px;');
    $('.mbt .firstrow.col-xl-8').attr('style','flex: 0 0 100% !important; max-width: 100% !important;');
  };
 
});
</script>