How do I make my menu be turned on by default?

  • This menu uses alot of different tags so iam really confused, this is most of the code for the menu.

    (() => {
  const button = document.querySelector('#toggle-project-info');
  if (!button) {
    return;
  }
  window.addEventListener('load', () => button.click());
})();

var projectDetailToggle = $('#toggle-project-info');

if (projectDetailToggle.on('click', function(e) {
  e.preventDefault();
  body.toggleClass('project-detail-open');
}));
<a href="#">
  <span class="more-info-text"> <?php _e('Meer projecten'); ?></span>
  <i class="ml-3 fal fa-angle-up fa-2x text-white"></i>
</a>

    CSS:

    
       @media (min-width: 992px) {
      .project-detail-open .project-content-section {
        max-height: 2000px;
      }
    }

.project-detail-open .project-content-section .project-toggle {
  display: none;
}

@media (min-width: 992px) {
  .project-detail-open .project-content-section .project-toggle {
    display: block;
    position: absolute;
    top: 3rem;
    right: 1rem;
/*  display: flex; */
  }

  .project-detail-open .project-content-section .project-toggle .more-info-text {
    opacity: 0;
  }
}

.project-detail-open .project-content-section .project-toggle i {
  transform: rotate(180deg);
}

@media (min-width: 992px) {
  .project-detail-open .project-content-section .content-wrapper {
    opacity: 1;
  }
} 

.project-content-section .project-toggle {
  display: none;
  text-decoration: none !important;
}

@media (min-width: 992px) {
  .project-content-section .project-toggle {
    position: absolute;
    top: 1rem;
    right: 0;
    left: 0;
    z-index: 50;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    font-weight: 200;
    display: flex;
    align-items: center;
  }
}

.project-content-section .project-toggle i {
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform .4s ease-in-out;
}

@media (min-width: 992px) {
  .project-content-section {
    max-height: 80px;
    overflow: hidden;
    position: relative;
    transition: max-height .4s ease-in-out;
  }
}
    • This topic was modified 2 years, 4 months ago by olavvg.
    • This topic was modified 2 years, 4 months ago by Yui. Reason: formatting
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    You should be able to simply include the project-detail-open class in the initial HTML as the default, instead of letting script add it when clicked. If it’s already there, on the first click event, the script will remove it (thus closing the menu) and subsequently toggle back and forth as usual. You’re just changing the initial starting condition.

Viewing 1 replies (of 1 total)
  • The topic ‘How do I make my menu be turned on by default?’ is closed to new replies.