<main>
  <section>
    <h1>Contact Us</h1>
    <p>Your comments are important to us. </p>
    

    
    <div class='tab-panels'>
      <div class='tabs' role="tablist"> <!-- Tab navigation -->
        <a href='#tabcontent1' id='tab1' aria-controls="tabcontent1" role="tab">Restaurant Review</a>
        <a href='#tabcontent2' id='tab2' aria-controls="tabcontent2" role="tab">Job Applying</a>
        <a href='#tabcontent3' id='tab3' aria-controls="tabcontent3" role="tab">Others</a>
      </div>
      <div id='tabcontent1' class='tab-content' aria-labelledby='tab1' role="tabpanel">
        <h2>Restaurant Review</h2>
        <form action='#' method='get' oninput='output.value=rating.value'>
          <p>Note: [*] denotes mandatory field.</p>
          <fieldset>
            <label for='form1-name'>Your Name</label>
            <input type='text' id='form1-name' name='name'>
          </fieldset>
          <fieldset>
            <label for='form1-movie'>[*] Which Restaurant?</label>
            <input type='text' id='form1-movie' name='movie' required>
          </fieldset>
          <fieldset>
            <label for='form1-comments'>Your comments</label>
            <input type='text' id='form1-comments' name='comment'>
          </fieldset>
          <fieldset>
            <label for='rating'>[*] How you rate? <span>0-5</span></label>
            <input type='range' id='rating' name='rating' min='0' max='5' value='3' step='1'>
            <output name='output' for='rating'>3</output>
          </fieldset>
          <input type='submit' value='Submit Review'>
        </form>
      </div>
      <div id='tabcontent2' class='tab-content' aria-labelledby='tab2' role="tabpanel">
        <h2>Job Applying</h2>
        <form action='#' method='get'>
          <p>Note: [*] denotes mandatory field.</p>
          <fieldset>
            <label for='form2-name'>Your Name</label>
            <input type='text' id='form2-name' name='name'>
          </fieldset>
          <fieldset>
            <label for='form2-email'>Your Email</label>
            <input type='email' id='form2-email' name='email'>
          </fieldset>
          <fieldset>
            <label for='form2-position'>Which position do you want to apply?</label>
            <input type='text' id='form2-position' name='position'>
          </fieldset>
          <fieldset>
            <label for='form2-resume'>Your resume: </label>
            <textarea id='form2-resume' name='resume'></textarea>
          </fieldset>
          <input type='submit' value='Submit Job Application'>
        </form>
      </div>

      <div id='tabcontent3' class='tab-content' aria-labelledby='tab3' role="tabpanel">
        <h2>Others</h2>
        <form action='#' method='get'>
          <p>Note: [*] denotes mandatory field.</p>
          <fieldset>
            <label for='form3-name'>Your Name</label>
            <input type='text' id='form3-name' name='name'>
          </fieldset>
          <fieldset>
            <label for='form2-email'>Your Email</label>
            <input type='email' id='form2-email' name='email'>
          </fieldset>
          <fieldset>
            <label for='form3-comments'>Your comments: </label>
            <textarea id='form3-comments' name='comment'></textarea>
          </fieldset>
          <input type='submit' value='Submit Comments'>
        </form>
      </div>
    </div>

  </section>

</main>


<section>
  <a href="#rental-dialog" class="rent-now button">Show Menu</a>
  <div id='rental-dialog' role="dialog" aria-labelledby="dialog-heading" aria-describedby="dialog-description"> <!-- Rental dialog. -->
    <h2 id='dialog-heading'>Renting Restaurant</h2>
    <p id='dialog-description'>It only take few steps to enjoy the food.</p>
    <div class="container">
      <div class="ui">
        <a href='#close-rental-dialog' aria-label="Close the dialog">Close</a>
      </div>
    </div >     
  </div>
</section>
.active {
  border: 1px solid red;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

#rental-dialog {
  display: none;
  
  &.show {
    display: block;
  }
}

/* Not related */
body {padding:2em;}
View Compiled
console.log("JavaScript loaded.");
$(function(){
  /* Popup box */
  $('[href="#rental-dialog"]').click(function(){
    $('#rental-dialog').toggleClass('show');
    return false;
  });
  $('[href="#close-rental-dialog"]').click(function(){
    $('#rental-dialog').removeClass('show');
    return false;
  });


  /* Forms submission */
  $('.label').addClass('hidden');
  $('[type="submit"]').click(function(){
    if (Math.random()>0.5) {
      $('.success.label').removeClass('hidden');
    } else {
      $('.alert.label').removeClass('hidden');
    }
    return false;
  });


  /* Tabs */
  // show the first tab.
  $('.tab-content:first').addClass('active');

  // indicate first tab is active.
  $('.tabs > a').removeClass('active');
  $('.tabs > a:first').addClass('active');

  // when click on the tab link.
  $('.tabs > a').click(function(){
    // get the href, which is #tab1, #tab2 or #tab3
    var href = $(this).attr('href');

    // hide all tabs.
    $('.tab-content').removeClass('active')

    // show only the target tab.
    $(href).addClass('active')

    // indicate target tab is active.
    $('.tabs > a').removeClass('active');
    $('.tabs > a[href=' + href + ']:first').addClass('active');

    // disable default browser behavior.
    return false;
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js