• Listen to a special audio message from Bill Roper to the Hive Workshop community (Bill is a former Vice President of Blizzard Entertainment, Producer, Designer, Musician, Voice Actor) 🔗Click here to hear his message!
  • Read Evilhog's interview with Gregory Alper, the original composer of the music for WarCraft: Orcs & Humans 🔗Click here to read the full interview.

[HTML] Hidden text bar??

Status
Not open for further replies.
Level 13
Joined
Aug 4, 2012
Messages
1,022
How to make Hidden bar on HTML??
Like this:

<p>your text</p>

Then, below ( footer / ending frames border / margin ) had the hide text button too
|
|
|
|
V



So, when I click the button " 1 "
It'll show the text.

I can click the button again to hidden it again.
The button to hide the text is also placed on the footer / ending of the text ( make personal button on the footer of the border )

=====================================================================================



attachment.php




=====================================================================================

Here's my code:
HTML:
<!doctype html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>FRENGERS 1</title>
  </head>
  <body>
    <style>
      body
      {
        background-color: white;
        margin: 50px;
      }
      
      div
      {
        background-color: black;
      }
      
      li
      {
        font-size: 25px;
      }
      
      li, h1, h2, h3, h4, h5
      {
        font-family: courier;
        color: white;
      }
      
      li, h1, h2, h3, h4
      {
        text-align: center;
      }
      
      h1
      {
        font-size: 100px;
        padding: 0px;
        margin: 0px;
      }
      
      h2
      {
        font-size: 25px;
      }
      
      h3
      {
        font-size: 50px;
      }
      
      h4
      {
        text-align: left;
        color: black;
        font-size: 20;
        display: block;
        position: relative;
      }
      
      *
      {
        -x-box-sizing: border-box;
        -y-box-sizing: border-box;
        -z-box-sizing: border-box;
        box-sizing: border-box;
      }
      
      .Episode-Number
      {
        overflow: hidden;
      }
      
      .Episode-Selector
      {
        cursor: pointer;
      }
      
      .Episode-Transition
      {
        background-color: white;
        margin-left: 50px;
        margin-right: 50px;
        -x-transition: all 0.5s ease-in-out;
        -y-transition: all 0.5s ease-in-out;
        -z-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
      
      .Episode-Title
      {
        font-size: 20px;
        font-family: "Courier";
        -x-transition: all 0.5s ease-in-out;
        -y-transition: all 0.5s ease-in-out;
        -z-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
    
    </style>
    <div>
      <h1>FRENGERS</h1>
      <h1>1</h1>
      <h2>New Terrain</h2>
      
      <!--
      Episode List
      --->
      
      <div class="Episode-Number">
        <div class="Episode-Selection">
          <div class="Episode-Transition">
            <h4>1</h4>
            <p class="Episode-Title">Jumping Off The Seasaw</p>
          </div>
        </div>
      </div>
      
      <!--
      Ending
      --->
      
      <h3>CREDIT</h3>
      <ul>
        <li><strong>Shapemaker</strong>
          <ul>
            <li>Born 2 Modificate</li>
          </ul>
        </li>
        <li><strong>Speller</strong>
          <ul>
            <li>Mr_Bean</li>
          </ul>
        </li>
        <li><strong>Helper</strong>
          <ul>
            <li>Arthas Nightshade</li>
          </ul>
        </li>
        <li><strong>Inspirator</strong>
          <ul>
            <li>MEW</li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>
 

Attachments

  • 1.png
    1.png
    19.7 KB · Views: 317
Last edited by a moderator:
Status
Not open for further replies.
Top