Interactive Toggle for Full and Half Details Sections with Slick Button Integration

PHOTO

Fri Mar 01 2024 21:37:08 GMT+0000 (Coordinated Universal Time)

Saved by @Y@sir #social-share-icons #share-icons #social-share-buttons

document.addEventListener("DOMContentLoaded", function () {
  const toggleButton = document.getElementById("fulltoggleButton");
  const myDiv = document.getElementById("fulldetailssection");
  const halfdetailssection = document.getElementById("halfdetailssection");

  if (toggleButton) {
    toggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  const halftoggleButton = document.getElementById("halftoggleButton");

  if (halftoggleButton) {
    halftoggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  // Attach click event to the document body for specific slick buttons
  document.body.addEventListener("click", function (event) {
    const target = event.target;
    const isSlickButton = target.matches(".wpl-el-property-slider-section .slick-next, .wpl-el-property-slider-section .slick-prev, .wpl-el-testimonial-section .slick-next, .wpl-el-testimonial-section .slick-prev");

    if (isSlickButton) {
      if (myDiv.style.display !== "none") {
        myDiv.style.display = "none";
        halfdetailssection.style.display = "block";
      }
    }
  });

  function toggleSections() {
    if (myDiv.style.display === "none") {
      myDiv.style.display = "block";
      halfdetailssection.style.display = "none";
    } else {
      myDiv.style.display = "none";
      halfdetailssection.style.display = "block";
    }
  }
});

COPY

The provided JavaScript code manages the visibility toggling of two sections in response to button clicks. The script targets specific buttons, such as those within slick sliders, to control the display of two div sections: "fulldetailssection" and "halfdetailssection." Clicking on the designated buttons alternately hides and displays these sections, ensuring that the "halfdetailssection" is visible when the "fulldetailssection" is hidden. Additionally, the script supports toggling these sections by clicking on separate buttons labeled "fulltoggleButton" and "halftoggleButton." The overall goal is to create an interactive UI where certain button clicks control the visibility state of specific content sections.

Save snippets that work from anywhere online with our extensions

Comments

Show and Hide

@Y@sir

show div if any content exist in the div Interactive Toggle for Full and Half Details Sections with Slick Button Integration

WordPress

@Y@sir

Allow SVG Files Upload WordPress Dark Mode Dashboard Interactive Toggle for Full and Half Details Sections with Slick Button Integration Get Current Year in php Update all posts by selecting a specific field type. Monarch Plugin | Social Share icons with Short-code assign the specific term from the "specific" taxonomy to all "specific-post-type" posts with the "sepecific-field-option" option selected. Hide and Show Div based on Filter | Jetsmartfilters Hide something when use filter YS - Subscribe form configure your WordPress site to send emails via the Brevo API without plugin Text Reveal Effect using GSAP Automate FAQs schema for Bricks accordion Element

JavaScript

@Y@sir

Interactive Toggle for Full and Half Details Sections with Slick Button Integration Hide and Show Div based on Filter | Jetsmartfilters Hide something when use filter Text Reveal Effect using GSAP Automate FAQs schema for Bricks accordion Element

#social-share-icons #share-icons #social-share-buttons

Social Share Icons with Dropdown on-click

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

    :root {
      --primary: #015478;
      --white: #fff;
      --icon-clr: #aaaaaa;
      --facebook-clr: #3b5998;
      --twitter-clr: #55acee;
      --instagram-clr: #bc2a8d;
      --reddit-clr: #ff4500;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
      font-family: "Open Sans", sans-serif;
      user-select: none;
    }

    .ss_wrap {
      position: relative;
      margin: 0px !important;
    }

    .ss_wrap .ss_btn {
      background: var(--white);
      color: var(--icon-clr);
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3px;
      font-size: 1.4rem;
      border-radius: 3px;
      cursor: pointer;
    }

    .ss_btn .icon {
      display: flex;
    }
    
    .dd_list .icon{
      font-size: 1.3rem;
    }

    .ss_wrap .dd_list {
      position: absolute;
    }

    .ss_wrap .dd_list ul {
      display: none;
      width: auto;
      background: var(--white);
      margin: 0 10px;
      box-shadow: 0px 0px 20px #ededed;
      border-radius: 3px;
      position: relative;
    }

    .ss_wrap .dd_list ul li a {
      display: flex;
      width: 50px;
      height: 50px;
      margin: 0 10px;
      justify-content: center;
      align-items: center;
      color: var(--icon-clr);
    }

    .ss_wrap .dd_list ul:before {
      content: "";
      position: absolute;
      border: 8px solid;
    }

    /* social share 3 */
    .ss_wrap.ss_wrap_3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .ss_wrap.ss_wrap_3 .dd_list {
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
    }

    .ss_wrap.ss_wrap_3 .dd_list ul {
      flex-direction: column;
      width: 175px;
      border-radius: 3px;
    }

    .ss_wrap.ss_wrap_3 .dd_list ul li a {
      width: 100%;
      margin: 0;
      justify-content: unset;
      padding: 0 10px;
    }

    .ss_wrap.ss_wrap_3 .dd_list ul li a span {
      display: flex;
    }

    .ss_wrap.ss_wrap_3 .dd_list ul li a span.icon {
      width: 25px;
      margin-right: 10px;
    }

    .ss_wrap.ss_wrap_3 .dd_list ul li a span.text {
      width: 125px;
    }

    .ss_wrap.ss_wrap_3 .dd_list ul:before {
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      border-color: transparent transparent var(--primary) transparent;
    }

    .ss_wrap.ss_wrap_3 .icon{
    color: black;
    }
    
    .ss_wrap.ss_wrap_3 span.text:hover {
      color: var(--primary);
    }

    .ss_wrap .ss_btn.active + .dd_list ul {
      display: flex;
    }
  </style>
</head>
<body>
  <div class="social_share_wrap">
    <div class="ss_wrap ss_wrap_3">
      <div class="ss_btn">
        <span class="icon">
          <ion-icon name="share-social"></ion-icon>
        </span>Share
      </div>

      <div class="dd_list">
        <ul>
          <li><a href="#" class="facebook" onclick="shareFacebook()">
            <span class="icon">
              <ion-icon name="logo-facebook"></ion-icon>
            </span>
            <span class="text">
              Facebook
            </span>
          </a></li>
          <li><a href="#" class="whatsapp" onclick="shareWhatsapp()">
            <span class="icon">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </span>
            <span class="text">
              Whatsapp
            </span>
          </a></li>
          <li><a href="#" class="email" onclick="shareEmail()">
            <span class="icon">
              <ion-icon name="mail"></ion-icon>
            </span>
            <span class="text">
              Email
            </span>
          </a></li>
          <li><a href="#" class="sms" onclick="shareSMS()">
            <span class="icon">
              <ion-icon name="chatbox"></ion-icon>
            </span>
            <span class="text">
              SMS
            </span>
          </a></li>
          <li><a href="#" class="copy-link" onclick="copyLink()">
            <span class="icon">
              <ion-icon name="copy"></ion-icon>
            </span>
            <span class="text">
              Copy Link
            </span>
          </a></li>
        </ul>
      </div>
    </div>
  </div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var ss_btn_3 = document.querySelector(".ss_wrap_3 .ss_btn");
        var dd_list_3 = document.querySelector(".ss_wrap_3 .dd_list");

        ss_btn_3.addEventListener("click", function (event) {
            event.stopPropagation();
            this.classList.toggle("active");
        });

        dd_list_3.addEventListener("click", function (event) {
            event.stopPropagation();
        });

        // Add an event listener to close the dropdown when clicking anywhere outside
        document.addEventListener('click', function () {
            ss_btn_3.classList.remove("active");
        });

        // Prevent event propagation when clicking on icons
        var icons = document.querySelectorAll(".ss_wrap_3 .icon");
        icons.forEach(function (icon) {
            icon.addEventListener("click", function (event) {
                event.stopPropagation();
            });
        });
    });

    function showCopiedMessage() {
        alert('Link Copied');
    }

    function shareFacebook() {
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href));
    }

    function shareWhatsapp() {
        window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href));
    }

    function shareEmail() {
        window.open('mailto:?body=Check this out: ' + encodeURIComponent(window.location.href));
    }

    function shareSMS() {
        window.open('sms:&body=' + encodeURIComponent(window.location.href));
    }

    function copyLink() {
        var dummy = document.createElement("textarea");
        document.body.appendChild(dummy);
        dummy.value = window.location.href;
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);

        // Show the "Link Copied" message
        showCopiedMessage();
    }

    // Add an event listener to close the share box when clicking anywhere on the screen
    document.body.addEventListener('click', function (event) {
        // Check if the click is outside the share box
        var shareBox = document.querySelector('.social_share_wrap');
        if (!shareBox.contains(event.target)) {
            // Clicked outside the share box, close it
            var ss_btn = document.querySelector(".ss_wrap_3 .ss_btn");
            ss_btn.classList.remove("active");
        }
    });
</script>
</body>
</html>

#social-share-icons #share-icons #social-share-buttons

Interactive Toggle for Full and Half Details Sections with Slick Button Integration

document.addEventListener("DOMContentLoaded", function () {
  const toggleButton = document.getElementById("fulltoggleButton");
  const myDiv = document.getElementById("fulldetailssection");
  const halfdetailssection = document.getElementById("halfdetailssection");

  if (toggleButton) {
    toggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  const halftoggleButton = document.getElementById("halftoggleButton");

  if (halftoggleButton) {
    halftoggleButton.addEventListener("click", function () {
      toggleSections();
    });
  }

  // Attach click event to the document body for specific slick buttons
  document.body.addEventListener("click", function (event) {
    const target = event.target;
    const isSlickButton = target.matches(".wpl-el-property-slider-section .slick-next, .wpl-el-property-slider-section .slick-prev, .wpl-el-testimonial-section .slick-next, .wpl-el-testimonial-section .slick-prev");

    if (isSlickButton) {
      if (myDiv.style.display !== "none") {
        myDiv.style.display = "none";
        halfdetailssection.style.display = "block";
      }
    }
  });

  function toggleSections() {
    if (myDiv.style.display === "none") {
      myDiv.style.display = "block";
      halfdetailssection.style.display = "none";
    } else {
      myDiv.style.display = "none";
      halfdetailssection.style.display = "block";
    }
  }
});

Interactive Toggle for Full and Half Details Sections with Slick Button Integration

Save snippets that work from anywhere online with our extensions

Comments

More like this

Show and Hide

WordPress

JavaScript

Browse more snippets >>

Interactive Toggle for Full and Half Details Sections with Slick Button Integration

Save snippets that work from anywhere online with our extensions

Comments

More like this

Show and Hide

WordPress

JavaScript

Browse more snippets >>

Embed code snippet