Hide the div only if a specific element is found on the page

Question

Hide the div only if a specific element is found on the page

I am currently exploring different methods to show or hide a left-hand navigation menu on my Volusion store.

Is it possible to use JavaScript or jQuery to alter the CSS display property of a div based on the presence of another element on the page?

The issue I am facing is that the template structure of this software is quite intricate. There is only one skin file for the entire site, meaning that if I want the left-hand navigation to appear at all, it must be included in the skin file. However, if it is included in the skin file, it will be displayed on every page except the homepage.

Given that this is an e-commerce platform, I can easily modify the content and elements on my informational pages. However, the product and category pages are generated dynamically. My goal is to display the left-hand menu on informational pages but hide it on product and category pages.

This brings me back to my original question. Since I can easily insert an HTML element into my informational pages, could I add a

<br class="show-left-nav" />

to the page as a trigger for a JavaScript-based CSS change?

Thank you!

javascript jquery html css

Answer 1

Answer №1

Absolutely!

if($('.anotherElement').length){ // checks if element exists
  // display or conceal a different div
  $('.someOtherElement').show();
}

Answer 2

Absolutely!

if($('.anotherElement').length){ // checks if element exists
  // display or conceal a different div
  $('.someOtherElement').show();
}

Answer 3

Answer №2

Seems pretty straightforward to me.

#sidebar {display:none;}

Here is the JavaScript to make the sidebar appear based on a condition:

var checkElement = document.getElementById("testId");
var sidebarElement = document.getElementById("sidebar"); 
if(typeof(checkElement) !== undefined){
    sidebarElement.style.display = "block";
}

And here is the equivalent code in jQuery:

if($("#testId")){
    $("#sidebar").show();
}

Answer 4

Seems pretty straightforward to me.

#sidebar {display:none;}

Here is the JavaScript to make the sidebar appear based on a condition:

var checkElement = document.getElementById("testId");
var sidebarElement = document.getElementById("sidebar"); 
if(typeof(checkElement) !== undefined){
    sidebarElement.style.display = "block";
}

And here is the equivalent code in jQuery:

if($("#testId")){
    $("#sidebar").show();
}

Answer 5

Answer №3

If you are able to access the div with the id="content", then you can insert the new element at the beginning of it.

<div id="content">
    <br class="show-left-nav" />
    <div id="content_area"></div><!--Already exists-->
    <div id="leftNav"></div><!--Already exists-->
</div>

Additionally, make sure to include the following CSS:

.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}

The ~ symbol represents the general sibling selector in CSS.

Answer 6

If you are able to access the div with the id="content", then you can insert the new element at the beginning of it.

<div id="content">
    <br class="show-left-nav" />
    <div id="content_area"></div><!--Already exists-->
    <div id="leftNav"></div><!--Already exists-->
</div>

Additionally, make sure to include the following CSS:

.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}

The ~ symbol represents the general sibling selector in CSS.

Answer 7

Answer №4

If you have the ability to add a class higher up in the hierarchy (such as on the body tag), you can easily control the display of the sidebar using the following CSS:

body.hide-left-nav .left-nav { display: none; }
/* or if you can insert div.hide-left-nav as a previous sibling of the sidebar */
div.hide-left-nav ~ .left-nav { display: none; }

Try to find a way to manipulate the template engine to achieve your desired result.

While you can use jQuery, keep in mind that it may cause a Flash of Unstyled Content (FOUC) effect as the browser needs to wait for the document to fully load before determining if the element is present. However, you can still utilize jQuery (refer to Adil's answer) or try an alternative approach:

/*
This method works best when placed after the body tag and before the navbar,
and without being wrapped inside a document.ready function.
It utilizes location.href so document.ready is not necessary
*/
if (location.href.match(/products|categories/)) {
    $("body").addClass("hide-left-nav");
}

Answer 8

If you have the ability to add a class higher up in the hierarchy (such as on the body tag), you can easily control the display of the sidebar using the following CSS:

body.hide-left-nav .left-nav { display: none; }
/* or if you can insert div.hide-left-nav as a previous sibling of the sidebar */
div.hide-left-nav ~ .left-nav { display: none; }

Try to find a way to manipulate the template engine to achieve your desired result.

While you can use jQuery, keep in mind that it may cause a Flash of Unstyled Content (FOUC) effect as the browser needs to wait for the document to fully load before determining if the element is present. However, you can still utilize jQuery (refer to Adil's answer) or try an alternative approach:

/*
This method works best when placed after the body tag and before the navbar,
and without being wrapped inside a document.ready function.
It utilizes location.href so document.ready is not necessary
*/
if (location.href.match(/products|categories/)) {
    $("body").addClass("hide-left-nav");
}

Answer 9

Answer №5

Check out the code snippet provided:

jQuery.fn.checkIfExist = function(){return this.size;}

if ($(search).checkIfExist()) {
    // Perform action
}

Answer 10

Check out the code snippet provided:

jQuery.fn.checkIfExist = function(){return this.size;}

if ($(search).checkIfExist()) {
    // Perform action
}

Answer 11

Answer №6

An alternative way to achieve the same result is to use the following code:

if ($(selector).is('*')) {
  // Perform an action
}

Answer 12

An alternative way to achieve the same result is to use the following code:

if ($(selector).is('*')) {
  // Perform an action
}

Answer 13

Answer №7

Of course. Check out the link here: http://jsfiddle.net/LW5Bb/

nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();

toggle_button.on('click',function(){
    nav.toggle();
})

If you really want it to show/hide based on another item's visibility...

if($('#your-item').is(':visible')) function(){ nav.toggle() })

or you can simply do:

if($('#your-item').is(':visible')) function(){ nav.show() })

if toggling is not necessary.

Answer 14

Of course. Check out the link here: http://jsfiddle.net/LW5Bb/

nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();

toggle_button.on('click',function(){
    nav.toggle();
})

If you really want it to show/hide based on another item's visibility...

if($('#your-item').is(':visible')) function(){ nav.toggle() })

or you can simply do:

if($('#your-item').is(':visible')) function(){ nav.show() })

if toggling is not necessary.

Hide the div only if a specific element is found on the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Having trouble rendering an object in my ThreeJS project. The error message says: "THREE.OBJLoader: Unexpected line: 'usemap glass'"

How to implement file upload using CodeIgniter and jQuery AJAX

Wait for the Selenium test to continue only when a specific element is visible on

Reliable Dropdown Navigation Bars

Guide on setting an empty text box to be zero

Editing HTML using the retrieved jQuery html() content

The unusual behavior of a page refresh in jQuery when replacing content

I am encountering an issue where my input is moving to the following line after the initial one. What could be

What is the method for inserting line breaks in Django at particular characters?

Is it possible to restrict the application of jquery .css() to a particular media query only?

Which hook should be implemented for automatically updating stock levels after a successful payment on WooCommerce?

Vercel - Deploying without the need to promote the project

Generate visual representations of data sorted by category using AngularJS components

Refreshing the settimeout function through a click event

Ways to delete an image from a batch file uploading feature

Employing JavaScript for fading divs in and out sequentially

Discrepant alignment of form group among the other elements in Bootstrap CSS

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Limit the radio button to being clickable

What is the best way to ensure a grid element has a column designated for each of its children?