css tabs:target

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <div class="tab-buttons">
    <a href='#General' class="button ">General</a>
    <a href='#Metadata' class="button">Metadata</a>
    <a href='#Security' class="button">Security</a>
  </div>

  <section id='General' class="tabcontent target active">
    <table class="Files-metadata">
      <caption>
        <a data-fancybox="" href="https://c.disquscdn.com/uploads/forums/127/9632/avatar92.jpg?1355351207" title="beast-cars-skyline-954358.jpg"><img src="https://c.disquscdn.com/uploads/forums/127/9632/avatar92.jpg?1355351207" alt="beast-cars-skyline-954358.jpg"></a> <input type="hidden" value="97">
      </caption>
      <tbody>
        <tr>
          <td>Path</td>
          <td class="value page"><input type="text" value="/image/jpeg/beast-cars-skyline-954358.jpg" name="page"></td>
        </tr>
        <tr>
          <td>Directory</td>
          <td>/engine/Files/Uploads/image/jpeg/beast-cars-skyline-954358.jpg</td>
        </tr>
        <tr>
          <td>Title</td>
          <td class="value title"><input type="text" name="title" value="beast-cars-skyline-954358.jpg"></td>
        </tr>

        <tr>
          <td>Description</td>
          <td class="value description"><input type="text" name="description" value="beast-cars-skyline-954358.jpg"></td>
        </tr>

        <tr>
          <td>Upload date</td>
          <td>2022-07-31 20:24:30</td>
        </tr>

        <tr>
          <td>File Type</td>
          <td>jpg</td>
        </tr>

        <tr>
          <td>Thumbnail</td>
          <td>/engine/Files/thumbnails/image/jpeg/480-beast-cars-skyline-954358.jpg</td>
        </tr>
      </tbody>
    </table>

    <button onclick="SaveMetadata();" class="Files-metadata-submit-button" value="">Save Settings</button>
  </section>

 ...

CSS

.container .tab-buttons {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 50px;
  text-align: justify;
}

.container .tab-buttons .button {
  /* border: 0px none; */
  margin: 0px;
  padding: 0px 20px 0px 20px;


  /* background-color: #555; */
  /* color: white; */
  float: left;
  /* border: none; */
  /* outline: none; */
  cursor: pointer;
  /* padding: 14px 16px; */
  /* font-size: 17px; */
  width: auto;
  max-width: 100%;
  min-width: 30%;
  text-align: center;
}

.container .tab-buttons .button:hover {
  background: #EEEEEE;
}

.active {
  display: block;
}

.tabcontent {
  display: none;

  background: #F9F9F9 !important;
  border: 1px solid #CCC;
  margin-top: -1px !important;
  padding: 20px 30px;
}

.tabcontent:target {
  display: block;
}

table,
input,
button {
  width: 100%;
}