How to have more than one element change behaviour when an element is clicked

AshNaz87 Published at Dev

AshNaz87

I'm working on a Rails project where I want the content below the header to hide when the menu toggler is clicked, for devices with a width less than 1024px. This is what I have in my application.html.erb file:

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>

  <body>
    <%= render 'layouts/navbar' %>  
    <div class="container-fluid">
      <%= yield %>
    </div>
    <%= render 'layouts/footer' %>
  </body>
</html>

My header is structured like this:

<header>
  <%= image_tag('logo.png', alt: 'logo', class: 'small_device_image') %>
  <nav class="site-nav">
    <ul class="menu">
      <%= image_tag('logo.png', alt: 'logo', class: 'style_image') %>
      <li>
        <%= link_to root_path do %>
          <h6>Home</h6>
        <% end %>
      </li>
      <li>
        <%= link_to "pages/our-programmes" do %>
          <h6>Our Programmes</h6>
        <% end %>
      </li>
      <li>
        <%= link_to "pages/about-us" do %>
          <h6>About Us</h6>
        <% end %>
      </li>
      <li>
        <%= link_to new_contact_path do %>
          <h6>Contact Us</h6>
        <% end %>
      </li>
    </ul>
  </nav>

  <div class="menu-toggle">
    <div class="hamburger"></div>
  </div>
</header>

Below, is the accompanying scss:

header {
  width: 100%;
  margin: 0 auto;
  background: $blue;
  color: $white;
  padding: 1em 0;
  position: relative;
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.small_device_image {
  background-color: $white;
  border-radius: 3px;
  position: absolute;
  top: 1.5em;
  left: 2em;
}

.site-nav {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  background: $white;
  clip-path: circle(0% at top);
  transition: clip-path ease-in-out 700ms;
  .menu {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.style_image {
  background-color: $white;
  border-radius: 3px;
}

.site-nav-open {
  clip-path: circle(150% at top);
}

.site-nav .menu li {
  border-bottom: 1px solid $dark-blue;
  a {
    text-decoration: none;
    background-color: $yellow;
    color: $blue;
    display: block;
    text-transform: uppercase;
    font-family: $primary-font;
    padding: 2em 4em;
    &:hover {
      background-color: indianred;
      color: gold;
    }
  }
}

.site-nav .menu li:last-of-type {
  border-bottom: none;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.2em;
  right: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: $bright-white;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger{
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
} 

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}


@media only screen and (min-width: 320px) and (max-width: 1023px) {
  header {
    height: 75px;
    z-index: 1;
  }
  .style_image {
    display: none;
  }
  .site-nav .menu {
    height: calc(100vh - 155px);
    li {
      position: relative;
      height: 25%;
      a {
      height: calc(((100vh - 155px) / 4) - 1px);
      padding: 0;
      }
      h6 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .small_device_image {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
  .photo {
    display: none;
  }
  .site-nav {
    height: auto;
    position: relative;
    background-color: transparent;
    float: right;
    clip-path: initial;
    .menu li {
      display: inline-block;
      border: none;
      a {
        color: $white;
        background: transparent;
        padding: 0;
        margin-left: 2em;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}

I have added some jQuery in my application.js file. However, it doesn't hide what is in the div with the class, "container-fluid". What I want is for the content in the container-fluid class to disappear when the menu toggler is clicked and to appear when it is toggled off (I hope this makes sense :) ):

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
    $('.menu-toggle').click(function() {
        $('.site-nav').toggleClass('site-nav-open');
        $(this).toggleClass('open');
    });
});
$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.container.fluid').hide();
  })
});

I understand that I have put in a lot of code and it may not make sense. If anyone can be of any assistance, I would be very grateful.

Rich

I'm not running rails, so it's slightly difficult to pinpoint your exact issue.

The jQuery code you've written works, however, there is a typo in your code: try replacing ".container.fluid" with "container-fluid" in your jQuery and see if that resolves the issue.

Edit:

To toggle visibility of the .container-fluid element, this should work:

$(document).ready(function() {
    $('.menu-toggle').click(function() {
        $(this).toggleClass('open');
        $('.site-nav').toggleClass('site-nav-open');
        $('.container-fluid').toggleClass('active');
    });
});

With the additional css:

.active {
  display: none;
}

Hope this helps!

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.site-nav').toggleClass('site-nav-open');
    $(this).toggleClass('open');
  });
});
$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.container-fluid').hide();
  })
});

header {
  width: 100%;
  margin: 0 auto;
  background: $blue;
  color: $white;
  padding: 1em 0;
  position: relative;
}

header::after {
  content: "";
  clear: both;
  display: block;
}

.small_device_image {
  background-color: $white;
  border-radius: 3px;
  position: absolute;
  top: 1.5em;
  left: 2em;
}

 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: max-content;
  }

.site-nav {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  background: $white;
  clip-path: circle(0% at top);
  transition: clip-path ease-in-out 700ms;
}

.style_image {
  background-color: $white;
  border-radius: 3px;
}

.site-nav-open {
  clip-path: circle(150% at top);
}

.site-nav .menu li {
  border-bottom: 1px solid $dark-blue;
  a {
    text-decoration: none;
    background-color: $yellow;
    color: $blue;
    display: block;
    text-transform: uppercase;
    font-family: $primary-font;
    padding: 2em 4em;
    &:hover {
      background-color: indianred;
      color: gold;
    }
  }
}

.site-nav .menu li:last-of-type {
  border-bottom: none;
}

.menu-toggle {
  padding: 1em;
  position: absolute;
  top: 1.2em;
  right: .75em;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: $bright-white;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (min-width: 320px) and (max-width: 1023px) {
  header {
    height: 75px;
    z-index: 1;
  }
  .style_image {
    display: none;
  }
  .site-nav .menu {
    height: calc(100vh - 155px);
    li {
      position: relative;
      height: 25%;
      a {
        height: calc(((100vh - 155px) / 4) - 1px);
        padding: 0;
      }
      h6 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

@media only screen and (min-width: 1024px) {
  .small_device_image {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
  .photo {
    display: none;
  }
  .site-nav {
    height: auto;
    position: relative;
    background-color: transparent;
    float: right;
    clip-path: initial;
    .menu li {
      display: inline-block;
      border: none;
      a {
        color: $white;
        background: transparent;
        padding: 0;
        margin-left: 2em;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<header>
    <nav class="site-nav">
      <ul class="menu">
        <%= image_tag('logo.png', alt: 'logo', class: 'style_image') %>
          <li>
            <%= link_to root_path do %>
              <h6>Home</h6>
              <% end %>
          </li>
          <li>
            <%= link_to "pages/our-programmes" do %>
              <h6>Our Programmes</h6>
              <% end %>
          </li>
          <li>
            <%= link_to "pages/about-us" do %>
              <h6>About Us</h6>
              <% end %>
          </li>
          <li>
            <%= link_to new_contact_path do %>
              <h6>Contact Us</h6>
              <% end %>
          </li>
      </ul>
    </nav>

    <div class="menu-toggle">
      <div class="hamburger">V</div>
    </div>
</header>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-11-17

Comments

0 comments

How to add more than one element to a custom Menu in TinyMCE 4 and display its content on the editor canvas when clicked?

TOP Ranking

Article

How to have more than one element change behaviour when an element is clicked

How to have more than one element change behaviour when an element is clicked

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Retrieve Element Tag Value XML Using Bash

How to pass data to the ng2-bs3-modal?

JWT gives JsonWebTokenError "invalid token"

How to update azerothcore-wotlk docker container

C++ 16 bit grayscale gradient image from 2D array

redirect your computer port to url

Capybara Selenium Chrome opens About Google Chrome

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

How to make thrown errors visible outside of a Promise?

JMeter: Why get error when try to save test plan

Should you provide dependent libraries in client jar?

Issue making model pop up onPress of flatlist

Message: element not interactable on accessing a tag python

Calling Doctrine clear() with an argument is deprecated