W3Schools How To
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
W3Schools How To
Code snippets for HTML, CSS and JavaScript.
Slideshow
1 / 4
Caption Text
2 / 4
Caption Two
3 / 4
Caption Three
4 / 4
Caption Four
❮
❯
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("sldot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length} ;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].classList.remove("slideractive");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("slideractive");
}
Learn How To »
Login Form
Remember me
Learn How To »
// Get the modal
var loginMod = document.getElementById('loginModal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == loginMod) {
loginMod.style.display = "none";
}
}
Accordion
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn How To »
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("activeacc");
this.nextElementSibling.classList.toggle("showpanel");
}
}
var myaccbtn = document.getElementById("myfirstAcc");
myaccbtn.click();
Hover Dropdowns
Link 1
Link 2
Link 3
Learn How To »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Click Dropdowns
Link 1
Link 2
Link 3
Learn How To »
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2() {
document.getElementById("myDropdown2").style.right = "0";
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Side Navigation
×
About
Services
Clients
Contact
Learn How To »
// Sidenavs
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
function openNav3() {
document.getElementById("myCanvasNav").style.width = "100%";
document.getElementById("myCanvasNav").style.opacity = "0.8";
}
function openOffcanvas1() {
document.getElementById("myOffcanvas").style.width = "250px";
}
function openOffcanvas() {
document.getElementById("myOffcanvas").style.width = "250px";
document.getElementById("testtest").style.marginLeft = "50px";
}
function closeOffcanvas() {
document.getElementsByClassName("overlay3")[0].style.opacity = "0";
document.getElementById("myOffcanvas").style.width = "0%";
document.getElementById("testtest").style.marginLeft= "0%";
document.getElementById("myCanvasNav").style.width = "0%";
}
Fixed Sidebar
Learn How To »
Modal Box
Learn How To »
Modal Image
×
Learn How To »
// Get the modal
var modal = document.getElementById('myModal2');
var images = document.getElementById('eh');
var modalImg = document.getElementById("img02");
var captionText = document.getElementById("caption");
images.onclick = function(){
modal.style.display = "block";
modalImg.src = images.src;
modalImg.alt = images.alt;
captionText.innerHTML = images.alt;
}
Lightbox
×
❮
❯
function openLightboxModal() {
document.getElementById('myModalLightbox').style.display = "block";
}
function closeLightboxModal() {
document.getElementById('myModalLightbox').style.display = "none";
}
var slideIndexLightbox = 1;
showDivsLightbox(slideIndexLightbox);
function plusDivsLightbox(n) {
showDivsLightbox(slideIndexLightbox += n);
}
function currentDivLightbox(n) {
showDivsLightbox(slideIndexLightbox = n);
}
function showDivsLightbox(n) {
var i;
var x = document.getElementsByClassName("myLightbox");
var dots = document.getElementsByClassName("demolightbox");
var captionText = document.getElementById("lightboxCaption");
if (n > x.length) {slideIndexLightbox = 1}
if (n < 1) {slideIndexLightbox = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndexLightbox -1].style.display = "block";
dots[slideIndexLightbox -1].className += " w3-opacity-off";
captionText.innerHTML = dots[slideIndexLightbox -1].alt;
}
Learn How To »
Slideshow Gallery
1 / 6
2 / 6
3 / 6
4 / 6
5 / 6
6 / 6
❮
❯
var slgslideIndex = 1;
slgshowSlides(slgslideIndex);
function slgplusSlides(slgn) {
slgshowSlides(slgslideIndex += slgn);
}
function slgcurrentSlide(slgn) {
slgshowSlides(slgslideIndex = slgn);
}
function slgshowSlides(slgn) {
var slgi;
var slgslides = document.getElementsByClassName("slgmySlides");
var slgdots = document.getElementsByClassName("slgdemo");
var slgcaptionText = document.getElementById("slgcaption");
if (slgn > slgslides.length) {slgslideIndex = 1}
if (slgn < 1) {slgslideIndex = slgslides.length}
for (slgi = 0; slgi < slgslides.length; slgi++) {
slgslides[slgi].style.display = "none";
}
for (slgi = 0; slgi < slgdots.length; slgi++) {
slgdots[slgi].className = slgdots[slgi].className.replace(" slgactive", "");
}
slgslides[slgslideIndex-1].style.display = "block";
slgdots[slgslideIndex-1].className += " slgactive";
slgcaptionText.innerHTML = slgdots[slgslideIndex-1].alt;
}
Learn How To »
Image Hover Overlay
Learn How To »
Tabs
- London
- Paris
- Tokyo
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
openCity("London")
function openCity(cityName, evt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tabcontent.length; i++) {
tablinks[i].classList.remove("tabactive");
}
document.getElementById(cityName).style.display = "block";
if (evt) {evt.currentTarget.classList.add("tabactive");}
}
var mybtn = document.getElementsByClassName("tablinks")[0];
mybtn.click();
Learn How To »
Tab Image Gallery
Nature
Snow
Northern Lights
function openImg(imgName) {
var i, x;
x = document.getElementsByClassName("picture");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(imgName).style.display = "block";
}
Learn How To »
Alert Buttons
Learn How To »
Outline Buttons
Learn How To »
Top Navigation
Learn How To »
Responsive Top Navigation
Resize the browser window to see the effect:
Learn How To »
Fullscreen Navigation
Learn How To »
init_pagination();
