SimpleTuts.com
Login Register

jQuery Examples

1. Image Gallery (Basic):


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .gallery img {
        width: 100px;
        margin: 10px;
        cursor: pointer;
      }

      #modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
      }

      #modal-img {
        max-width: 90%;
        max-height: 90%;
        z-index: 2;
      }
    </style>
    <div class="gallery">
      <img src="thumb1.jpg" full="full1.jpg" class="thumb" />
      <img src="thumb2.jpg" full="full2.jpg" class="thumb" />
      <img src="thumb3.jpg" full="full3.jpg" class="thumb" />
    </div>

    <div id="modal" style="display: none">
      <div id="overlay"></div>
      <img id="modal-img" src="" />
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".thumb").click(function () {
          var fullImg = $(this).attr("full");
          $("#modal-img").attr("src", fullImg);
          $("#modal").fadeIn();
        });

        $("#overlay").click(function () {
          $("#modal").fadeOut();
        });
      });
    </script>
  </body>
</html>
Run Code

2. Image Gallery (Advanced):


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      /* Thumbnails */
      .gallery img {
        width: 100px;
        margin: 10px;
        cursor: pointer;
      }

      /* Modal Container */
      #modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }

      /* Dark Background Overlay */
      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 1;
      }

      /* Modal Content */
      #modal-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }

      /* Image Wrapper */
      .image-wrapper {
        position: relative;
        display: inline-block;
      }

      /* Modal Image */
      #modal-img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 6px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        display: block;
      }

      /* Close Button - now inside image-wrapper */
      #close-btn {
        position: absolute;
        top: -12px;
        right: -12px;
        background: white;
        border: none;
        font-size: 22px;
        width: 32px;
        height: 32px;
        line-height: 28px;
        text-align: center;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
        z-index: 3;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
      }

      /* Prev/Next Buttons */
      #prev-btn,
      #next-btn {
        background: rgba(255, 255, 255, 0.9);
        border: none;
        font-size: 30px;
        width: 44px;
        height: 44px;
        padding: 0;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        z-index: 3;
        transition: background 0.3s ease;
      }

      #prev-btn {
        margin-right: 20px;
      }
      #next-btn {
        margin-left: 20px;
      }

      #prev-btn:hover,
      #next-btn:hover,
      #close-btn:hover {
        background: white;
      }

      #close-btn,
      #prev-btn,
      #next-btn,
      .thumb {
        cursor: pointer;
      }
    </style>
    <div class="gallery">
      <img src="thumb1.jpg" data-full="full1.jpg" class="thumb" />
      <img src="thumb2.jpg" data-full="full2.jpg" class="thumb" />
      <img src="thumb3.jpg" data-full="full3.jpg" class="thumb" />
    </div>

    <div id="modal" style="display: none">
      <div id="overlay"></div>
      <div id="modal-content">
        <button id="prev-btn">❮</button>

        <div class="image-wrapper">
          <img id="modal-img" src="" />
          <button id="close-btn">×</button>
        </div>

        <button id="next-btn">❯</button>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function () {
        var images = [];
        var currentIndex = 0;

        // Build array of full-size image paths
        $(".thumb").each(function (index) {
          images.push($(this).data("full"));
          $(this).attr("data-index", index);
        });

        // Show modal with selected image
        $(".thumb").click(function () {
          currentIndex = parseInt($(this).attr("data-index"));
          $("#modal-img").attr("src", images[currentIndex]);
          $("#modal").fadeIn();
        });

        // Close modal
        $("#overlay, #close-btn").click(function () {
          $("#modal").fadeOut();
        });

        // Next button
        $("#next-btn").click(function () {
          currentIndex = (currentIndex + 1) % images.length;
          $("#modal-img").attr("src", images[currentIndex]);
        });

        // Prev button
        $("#prev-btn").click(function () {
          currentIndex = (currentIndex - 1 + images.length) % images.length;
          $("#modal-img").attr("src", images[currentIndex]);
        });
      });
    </script>
  </body>
</html>
Run Code

3. Responsive Dropdown Menu:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Dropdown Menu</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* Navbar */
    .navbar {
      background-color: #333;
      padding: 10px 20px;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .navbar h1 {
      margin: 0;
      font-size: 20px;
    }

    .menu-toggle {
      display: none;
      font-size: 24px;
      cursor: pointer;
    }

    /* Menu */
    .nav-menu {
      display: flex;
      gap: 20px;
      background-color: #000;
    }

    .nav-menu a {
      color: white;
      text-decoration: none;
      font-size: 16px;
      transition: color 0.3s;
    }

    .nav-menu a:hover {
      color: #4CAF50;
    }

    /* Dropdown animation */
    .nav-menu.mobile {
      display: none;
      flex-direction: column;
      padding: 10px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .nav-menu {
        display: none;
      }

      .menu-toggle {
        display: block;
      }

      .nav-menu.mobile {
        display: flex;
      }
    }
  </style>
</head>
<body>

  <div class="navbar">
    <h1>My Site</h1>
    <div class="menu-toggle">☰</div>
    <div class="nav-menu desktop">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </div>
  </div>

  <div class="nav-menu mobile">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>

  <script>
    $(document).ready(function() {
      $('.nav-menu.mobile').hide();
      $('.menu-toggle').click(function() {
        $('.nav-menu.mobile').stop(true, true).slideToggle(300);
      });

      // Optional: close the mobile menu when a link is clicked
      $('.nav-menu.mobile a').click(function() {
        $('.nav-menu.mobile').slideUp(300);
      });
    });
  </script>

</body>
</html>
Run Code

4. Accordion


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stylish Blue FAQ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f8ff;
      padding: 60px 20px;
      max-width: 700px;
      margin: auto;
      color: #1e3a5f;
    }

    h2 {
      text-align: center;
      margin-bottom: 40px;
      font-size: 32px;
      color: #0a2f5c;
      border-bottom: 2px solid #1e90ff;
      display: inline-block;
      padding-bottom: 5px;
    }

    .faq-item {
      background-color: #ffffff;
      border: 1px solid #cce6ff;
      border-radius: 8px;
      margin-bottom: 15px;
      padding: 18px 20px;
      box-shadow: 0 2px 10px rgba(30, 90, 150, 0.05);
      transition: box-shadow 0.3s ease;
    }

    .faq-item.active {
      box-shadow: 0 4px 20px rgba(30, 90, 150, 0.15);
      border-color: #1e90ff;
    }

    .faq-question {
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      padding-right: 30px;
      color: #0b3c70;
    }

    .faq-question::after {
      content: '+';
      position: absolute;
      right: 0;
      top: 0;
      font-size: 22px;
      color: #1e90ff;
      transition: transform 0.3s ease;
    }

    .faq-item.active .faq-question::after {
      content: '-';
      transform: rotate(180deg);
    }

    .faq-answer {
      display: none;
      margin-top: 12px;
      font-size: 16px;
      color: #3a4f66;
      line-height: 1.6;
      padding-left: 5px;
      border-left: 3px solid #1e90ff;
    }
  </style>
</head>
<body>

  <h2>FAQs</h2>

  <div class="faq-item">
    <div class="faq-question">What is your return policy?</div>
    <div class="faq-answer">
      We offer a 30-day return policy. Items must be unused and in their original 
      packaging. Once received, we’ll process your refund within 3–5 business days.
    </div>
  </div>

  <div class="faq-item">
    <div class="faq-question">Do you offer international shipping?</div>
    <div class="faq-answer">
      Absolutely! We ship to over 50 countries. Shipping fees and delivery times 
      vary depending on your location.
    </div>
  </div>

  <div class="faq-item">
    <div class="faq-question">How can I track my order?</div>
    <div class="faq-answer">
      You’ll get a tracking link in your email once your order is shipped. You 
      can also track it through your account dashboard.
    </div>
  </div>

  <script>
    $(document).ready(function () {
      $('.faq-question').click(function () {
        const parent = $(this).parent();

        // Close others
        $('.faq-item').not(parent).removeClass('active').find('.faq-answer').stop(true, true).slideUp(300);

        // Toggle current
        parent.toggleClass('active');
        parent.find('.faq-answer').stop(true, true).slideToggle(300);
      });
    });
  </script>

</body>
</html>
Run Code