CODEWITHSUNDEEP
jqueryruby-on-rails
AshNaz87
AshNaz87

Reputation: 434

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

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.

Upvotes: 2

Views: 53

Answers (1)

Rich
Rich

Reputation: 3336

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>

Upvotes: 2

Related Questions