I am trying to figure out the best way to hide/show a left hand navigation menu on my volusion store.
Would it be possible via javascript/jquery to change the css display type of a div based on weather another element is present on the page?
The reason I ask is that the templating of this software is a bit convoluted. There is only a single skin file for the entire site. If I want the left hand navigation to load at all, it must be in the skin file. If it's in the skin file, it will load on every page but the homepage.
Because this is e-commerce software, I can easily add/remove content and elements from my informational pages, but the product and category pages load dynamically. I want to show the left hand menu on my info pages, but hide it on my product/category pages.
Which brings me back around to my original question. Since I am able to easily add an html element to my info pages, could I simply add a <br class="show-left-nav" /> to the page to trigger a javascript css change?
.htm
Thanks!
I am trying to figure out the best way to hide/show a left hand navigation menu on my volusion store.
Would it be possible via javascript/jquery to change the css display type of a div based on weather another element is present on the page?
The reason I ask is that the templating of this software is a bit convoluted. There is only a single skin file for the entire site. If I want the left hand navigation to load at all, it must be in the skin file. If it's in the skin file, it will load on every page but the homepage.
Because this is e-commerce software, I can easily add/remove content and elements from my informational pages, but the product and category pages load dynamically. I want to show the left hand menu on my info pages, but hide it on my product/category pages.
Which brings me back around to my original question. Since I am able to easily add an html element to my info pages, could I simply add a <br class="show-left-nav" /> to the page to trigger a javascript css change?
http://xlevj.jyetp.servertrust.com/contact-us_a/286.htm
Thanks!
Share Improve this question asked Jan 27, 2014 at 14:37 Alex RitterAlex Ritter 1,0413 gold badges18 silver badges44 bronze badges 2- 1 Yes, it's possible. You probably shouldn't use irrelevant HTML for it though, rather add a class to something relevant. I.e. <body class="show-left-nav"> – ediblecode Commented Jan 27, 2014 at 14:42
- Good call. Thanks jumping. – Alex Ritter Commented Jan 27, 2014 at 14:46
7 Answers
Reset to default 8Yes !
if($('.someElement').length){ // returns true if element is present
// show or hide another div
$('.otherElement').hide();
}
Pretty Straight forward I'd say.
#sidebar {display:none;}
javascript:
var conditionalEl = document.getElementById("TestId");
var sidebar = document.getElementById("sidebar");
if(typeof(conditionalEl) !== undefined){
sidebar.style.display = "block";
}
jQuery:
if($("#TestId")){
$("#sidebar").show();
}
If you have access to the div with id="content" then add the element at the start of it.
<div id="content">
<br class="show-left-nav" />
<div id="content_area"></div><!--Already exists-->
<div id="leftNav"></div><!--Already exists-->
</div>
and in your CSS add
.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}
the ~ is the general sibling selector
If it is possible to add a class somewhere up the hierarchy (e.g. on body tag) then you can control the sidebar display using:
body.hide-left-nav .left-nav { display: none; }
/* or if you can inject div.hide-left-nav on previous sibling of sidebar */
div.hide-left-nav ~ .left-nav { display: none; }
See if you can hack into the template engine.
You can use jQuery too but it will create a FOUC effect because jQuery needs to wait for document ready in order to determine if the element is present and by that time the browser may have rendered the sidebar. You can still use jQuery though (see Adil's answer) or an alternate:
/*
this should work best if placed after body start and
before navbar and not wrapped inside document.ready
it uses location.href so document.ready not required
*/
if (location.href.match(/products|categories/)) {
$("body").addClass("hide-left-nav");
}
Try the below code:
jQuery.fn.exists = function(){return this.length;}
if ($(selector).exists()) {
// Do something
}
You can also do the samething by
if ($(selector).is('*')) {
// Do something
}
Sure. http://jsfiddle.net/LW5Bb/
nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();
toggle_button.on('click',function(){
nav.toggle();
})
If you're dead set on having it show/hide depending on another item's visibility...
if($('#your-item').is(':visible')) function(){ nav.toggle() })
or simply
if($('#your-item').is(':visible')) function(){ nav.show() })
if you don't want to toggle it.