Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Laravel

Hide Div On Specific Url With Css Or Js

Post a Comment
I'm trying to hide a .sidebar-item on a specific link. I am using Laravel & Bootstrap. I can hide it with CSS like so: .sidebar-item { display: none; } But that hides it every

Solution 1:

There are a few ways you can achieve this using CSS and JavaScript. A simple way would be to check the URL of the page:

With jQuery:

document.ready(function() {
  if (window.location.href.indexOf('/my/url')) {
    //Hide the element.
    jQuery('.sidebar-item').hide();
  }
});

Without jQuery:

window.onload = function() {
  if (window.location.href.indexOf('/my/url')) {
    //Hide the element.
    document.querySelectorAll('.sidebar-item')[0].style.display = 'none';
  }
};

Alternatively, you could add a custom class to the body tag for each page in Laravel. This will allow you to customize specific pages using CSS. I'm not a Laravel developer, but you can see two examples here: http://dev-notes.eu/2016/10/add-body-class-on-laravel-views/

(following is reproduced from the above blog post)

First method:

Pass a relevant variable from the blade template:

{{-- /views/articles/index.blade.php --}}
...
@extends('layouts.master', ['body_class' => 'articles index'])
...

Then in /views/layouts/master.blade.php:

<body
  @unless(empty($body_class))
    class="{{$body_class}}"
  @endunless
  >

Second method:

In the child blade template:

@section('pageClass', 'js-home-page')

In the master:

<body class="@yield('pageClass')">

Let's say you added the 'my-custom-page' class to the body tag of the page you want .sidebar-item to be hidden on. You can then modify your CSS to the following:

.my-custom-page .sidebar-item {
  display: none;
}

Solution 2:

A partial solution for assigning CSS properties based on current page url might be using CSS :target pseudo selector.


Post a Comment for "Hide Div On Specific Url With Css Or Js"