<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;
});
});
This Pen doesn't use any external CSS resources.