JSFiddle - React, Tailwind, and code Playground

by fiddledrew

HTML

<!DOCTYPE html http://jsfiddle.net/MChfU/ ; view-source:http://fiddle.jshell.net/MChfU/show/;>
<!DOCTYPE html

https://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.html
Hover pop out menu	https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text 
Sort Table	 	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table 
Search Table TD	 	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table 
Search Table row	https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table 
A-Z filtering		http://jsfiddle.net/MChfU/ 
Click Flip	 	https://jsfiddle.net/james2doyle/qsQun/ 
Google maps	 	https://css-tricks.com/snippets/html/get-directions-form-google-maps/ 
	 and 
Google maps	 	https://www.google.com/maps/dir/Current+Location/{latitude},{longitude}
QR Code link
Warning Cookie alert	https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_alert
>
<! https://github.com/ikromin/misc/blame/master/yahooweather/weather_yql_example.html >

<HTML>
  <STYLE>


  </STYLE>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <! https://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.html>

  <head>
  </head>

  <body translate="no" id="body">
    <div id="container">
      <div id="header">
        <a>Header</a>
      </div>


      <div id="mainBody">
        <a>Main</a>

        <div class="accordion">
          <table id="myTable">
            <th>
              <!Search filter>

              <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
              <!Search filter>
              <button onclick="sortTableA()">Az</button>
              <button onclick="sortTableZ()">Za</button>

            </th>
            <tr>
              <td>
                <div class="accord-header"><a class="N">Nat West</a><a class="O"> NW</a></div>
                <div...

CSS

#container {
        width: 500px;
        margin: auto;
        background-color: beige;
      }

      body {
        background: white;
      }

      #myTable {
        width: 390px;
        margin: auto;
      }

      .accord-header {
        width: 100%;
        cursor: pointer;
        border: 2px solid navy;
        border-radius: 5px;
        background-color: white;
      }

      .accord-content {
        display: none;
        background: orange;
        border: 2px solid grey;
        border-radius: 5px;
      }

      .on {
        background: silver;
      }

JavaScript

//# Accordion

//# Accordion
//# sourceURL=pen.js