Develop Reference

How to change css on click in javascript?

I am having an issue with the links in my dropdown nav menu. I believe that the issue is due to an owl carousel that is in the body, because when I inspect the nav items (right-click inspect element) the console highlights the owl-carousel, also when I change the .owl-carousel display to none in the console, then the links in the nav menu will work (color change on hover, mouse changes to pointer). Therefore, I want to change the .owl-carousel display to none when the toggle menu is active (when the burger menu is clicked).
var burgerMenu = function() {
$("body").on("click", ".js-fh5co-nav-toggle", function() {
$("#fh5co-nav > ul > li").css({ marginLeft: -50, opacity: 0 });
$(this).toggleClass("active");
var mainNav = $("#fh5co-main-nav");
mainNav.slideToggle(400).toggleClass("active");
if (mainNav.hasClass("active")) {
menuAnimate(1, 0, 400, 200);
} else {
menuAnimate(0, -50, 1, 0);
}
});
};
<!-- Mobile Toggle Menu Button -->
<i></i>
<!-- End Mobile Toggle Menu Button -->
<!-- Main Nav -->
<div id="fh5co-main-nav">
<nav id="fh5co-nav" role="navigation">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Products</li>
<li>Location</li>
<li>Cafe</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- End Main Nav -->
I don't really have any idea how to go about this. I have tried adding:
$('.owl-carousel').css({display: none});
to the burgerMenu function, but this changed nothing.
Any ideas would be greatly appreciated.
***EDIT:
thanks! .css({"display": "none"}) - this worked, but something i didn't think of - the other pages don't have an owl-carousel and I am still having this problem. I think the best thing would be to just have the body shift down when the nav menu is clicked - is this possible? any ideas? thanks, again.

Alternatively since you don't have dynamic css, you can use another class and the class:
in your css file:
.hidden {
display: none;
}
and in you js:
$('.owl-carousel').addClass("hidden");

$('.owl-carousel').css("display", "none");
try this instead of
$('.owl-carousel').css({display: none})

You can do something like the below code.
$('#hello').click(function() {
$('#hello').css({
'background-color': 'blue',
'color': 'white',
'font-size' : '35px'
});
});
#hello{
cursor : pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hello">hello world!</div>

Using core JS:
document.getElementById("my_custom_id").style.color="red";
In the above line of code you can set any CSS, I set the color to red for my_custom_id.

How to show and hide the particular div, when we click on particular link on that div?

Node: Please see the demo
All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
Please see the following figure, If I click on show content on 1st div then It will show rest of 1st div on other will not show, If I click on 2nd div then It will show the rest 2nd div, no other div will show.
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2

Try this piece of code . I think this is what you want to achieve .
$(document).ready(function() {
$('.bucket .restPart').hide();
$('.more').show();
$('.less').hide();
$('.more').click(function() {
$('.more').toggle() ;
$(this).parent().next('.restPart').show();
$('.less').toggle() ;
});
$('.less').click(function() {
$('.less').toggle() ;
$(this).parents('.restPart').hide();
$('.more').toggle();
});
});

You can achieve this effect using straightforward Javascript (rather than jQuery).
function showRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'block';
}
function hideRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
}
function initialiseRestPart() {
var restPart = document.getElementById('restPart');
restPart.style.display = 'none';
var showMore = document.getElementById('showMore');
showMore.addEventListener('click',showRestPart,false);
var showLess = document.getElementById('showLess');
showLess.addEventListener('click',hideRestPart,false);
}
window.onload = initialiseRestPart();
<div class="bucket">
... Content of visible part of bucket...
Show More.
<div id="restPart">
... Content of Rest Part...
Show Less.
</div>
</div>

I think your problem is with the Ids.
In a file, two elements shouldn't have the same id.
Apart from that your code seems fine, (more or less).
$(document).ready(function() {
$(".restPart").hide();
$('#grid_content').on('click', '.more', function() {
$(this).nextAll(".restPart:first").show();
});
$('#grid_content').on('click', '.less', function() {
$(this).closest("div").hide();
});
});
and the HTML :
<section id="grid_content">
<!--1st div generated by dynamically -->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--2nd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
<!--3rd div generated by dynamically-->
<div class="bucket">
<ul>Name: </ul>
<ul>Address: </ul>
<ul>Job:</ul>
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart">
<ul>Quealification: </ul>
<ul>College: </ul>
<ul>Country+:</ul>
Show Less.
</div>
</div>
</section>

vertical drop down menu displays sub menu and when clicking on another menu item closes the previous menu item

i have a section in the content area of my site that has a list of links that have sublinks in them.
so that the users click the least amount as possible, i figured a drop down menu would be best, then that link would take them into the page, etc.
i know nothing about javascript or jquery so all the examples i find are little to no use to me because i don't even know where to begin to modify them to suit my needs.
what i would like to have happen:
when a user clicks the link a list drops down from it with all the sub pages.
PAGE LINK 1
|--sub page
|--sub page
PAGE LINK 2
|--sub page
|--sub page
jsFiddle link: http://jsfiddle.net/hHn7b/
the only thing i need it to do is while it does toggle the display of the sub pages, i need it to also when another link is clicked it will close the previously opened drop down menu.
(think along the lines of how a radio button functions)
i am not scared to use javascript or even that jquery stuff on this if i need to, but i don't know enough to do it myself, and i don't have the time currently to attempt and learn how to or even enough to modify other's jquery code they post on other questions in this site.
Below is the code from the jsFiddle:
HTML:
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd');">PAGE LINK 1</span>
</div>
<div id="dl_sub_dd">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
<!--end dept_links_sub-->
<div class="dl_parent"><span onclick="toggle_visibility('dl_sub_dd1');">PAGE LINK 2</span>
</div>
<div id="dl_sub_dd1">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
CSS:
span {
cursor:pointer;
}
#dl_sub_dd, #dl_sub_dd1 {
display:none;
}
JS:
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}

Here:
Fiddle: http://jsfiddle.net/nkKja/
I used jQuery for this, as it makes things so much easier, and you said you had no problem with that.
What happens:
When a link is clicked, this line var submenu = $(this).parent().children('.dl_sub_dd'); first goes to the parent-element of the link, and from there searches for a child-element with class .dl_sub_dd.
Next, the code checks whether that child-element is visible. If not, it makes it visible (first hiding any other submenu's that might be showing. If it is visible, the code only hides the submenu for which the link was clicked.
HTML: (both elements are identical, except for the 'PAGE LINK 1' text)
<div class="dl_parent">
<div class="dl_link">PAGE LINK 1</div>
<div class="dl_sub_dd">
<ul>
<li>sub page</li>
<li>sub page</li>
</ul>
</div>
</div>
CSS:
.dl_link {
cursor:pointer;
}
.dl_sub_dd {
display:none;
}
JS:
$(window).on('load',function(){
$('.dl_link').click(function(){
var submenu = $(this).parent().children('.dl_sub_dd');
if (submenu.css('display') == 'none') {
$('.dl_sub_dd').hide(); //first hide any previously showing submenu's
submenu.show(); //then show the current submenu
} else {
submenu.hide(); //hide the current submenu again
}
});
});
UPDATE
When implementing the code on your website, I always like to be real organized. I always do it like this:
Have one index.php. In that you put require('page/websitename.php');
In the page/websitename.php, you put your HTML-page.
All your JS is in external files, and you link to that on your page in the <head></head> like this:
<script type="text/javascript" src="js/websitename.js"></script>
Link to library files (like jQuery) like this:
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
Php-files are in a php-foldes, images in a img-folder, etc
You'll have a structure like this:
▼ [Main folder]
css
websitename.admin.css
websitename.css
websitename.login.css
► img
js
websitename.admin.js
websitename.js
▼ lib
jquery
jquery.min.js
[other library]
[other library]
page
websitename.admin.php
websitename.login.php
websitename.php
► php
index.php
The php-folder (which is closed in this overbiew) might have another subfolder "admin" for php-scripts used exclusively by the admin page.
The img-folder may also have a sub-structure..
You get the point:)

Here's a script I actually use in production that does exactly what you're looking for. Basically the same idea as what #myfunkyside already posted, but with a few small enhancements.
It uses jQuery's slide animation for smoother user interaction
You can nest sub menus in the main menu as deep as you want
When the page loads, it opens the menu and highlights the link to the current page by matching it to the URL, which helps the user orient somewhat. This function is hyphen and dash friendly.
jsFiddle here: http://jsfiddle.net/contendia/ddXBU/4/
CSS:
<style>
#leftmenu h3 {
margin:0;
padding:2px 5px;
border-top:1px solid #006699;
border-bottom:1px solid #003366;
cursor:pointer;
background-color:#0e559d;
color:#ffffff;
text-align:left;
}
#leftmenu h3:hover {
background-color:#003366;
}
#leftmenu > ul {
margin:0;
padding:0;
}
#leftmenu > ul li {
padding-left:10px;
list-style-type:none;
}
#leftmenu > ul li a {
color:#666666;
font-weight:bold;
text-decoration:none;
}
#leftmenu > ul li a:hover {
text-decoration:underline;
}
#leftmenu .current {
color:#006699;
text-decoration:underline;
}
</style>
JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Get the URI path and strip the leading slash
var path = $(location).attr('pathname').replace(/\//, "");
// Get and append the querystring
path += $(location).attr('search');
// Hide everything
$('#leftmenu ul').hide();
// Go up 2 levels (a > li > ul) and open. Hide all others.
$('#leftmenu a[href="' + path + '"]').addClass('current').parent().parent().slideDown();
$('#leftmenu h3').click(
function() {
var $this = $(this);
$this.next('ul').siblings('ul').slideUp();
$this.next('ul').find('ul').slideUp();
$this.next().slideToggle(300);
});
});
</script>
HTML:
<div id="leftmenu">
<h3>First Menu</h3>
<ul>
<li>Underscores</li>
<li>Hyphens</li>
</ul>
<h3>Second Menu</h3>
<ul>
<li>Underscores</li>
<li>Hyphens</li>
<li>
<h3>Sub Menu</h3>
<ul>
<li>Underscores</li>
<li>Hyphens</li>
</ul>
</li>
</ul>
</div>

HTML/JavaScript - How can I hide the links and cursor?

I am working on a JavaScript/HTML template for my website however I am having trouble trying to figure out how to hide links and cursors when at different ID's.
The URL's end like so http://domain.com/index.html#about etc. The homepage Which is the following code:
<!-- Home Page -->
<section class="content show" id="home">
<h1>THIS IS THE HEADER</h1>
<h5>SUB HEADING</h5>
<p>THIS IS A PARAGRAPH OF TEXT.</p>
</section>
is the content that initially shows, the rest use "content hide". The issue I am having is that when at other ID's eg #services even though the content from other pages is hidden, links and cursors can still display when navigating the page. An example would be my templates page:
<!-- Web Templates -->
<section class="content hide" id="web_templates">
<h2>HTML Stand Alone Website Templates</h2>
<h3>Free Templates</h3>
<!--THE IMAGES ARE PLACED IN AN UNORDERED LIST-->
<ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->
<!--First Image-->
<li>
<img src="images/free_web_templates/hairstylesalon.jpg" width="150px" height="100px" alt="Hair Style Salon" /> <!--thumbnail image-->
<span> <!--span contains the popup image-->
<img src="images/free_web_templates/hairstylesalon.jpg" alt="Hair Style Salon" /> <!--popup image-->
<br />Hair Style Salon (Free Website Templates) Download <!--caption appears under the popup image-->
</span>
</li>
</ul>
</section>
When not on this page the hand cursor displays on every page even though the content is hidden. Is there anyway I can fix this so that when at different ID's in the URL the content including cursors and links is hidden?
The CSS for content:
.content {
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
The Main JS:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});

Are you perhaps looking for
{display:none} which makes things invisible and the space the element occupies is collapsed?

style a navigation link when a particular div is shown

I have JQuery working to show a particular div when a certain link is clicked.
I have managed to apply the effect I'm after with the main navigation bar through id'ing the body tag and using css to style when the id is found.
However, i'd like to apply the same effect to the sub navigation when a certain div is present.
How the main navigation is styled:
HTML:
<nav>
<ul>
<li id="nav-home">Home</li>
<li id="nav-showreel">Showreel</li>
<li id="nav-portfolio">Portfolio</li>
<li>Contact</li>
</ul>
</nav>
CSS:
body#home li#nav-home,
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}
(Other links havent been added to styling as those pages are still in development)
How the sub navigation is structured:
<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>
As you can see, its similar format to the main navigation, however i've tried the same approach and it doesn't work :(
The Javascript that switches the divs on the navigation click:
<script type="text/javascript">
$(document).ready(function() {
$('#3DWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});
$('#GFXWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #motionGraphics');
});
$('#compositingWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});
});
</script>
JSFiddle for full HTML & CSS : JSFiddle File
The effect I'm After:

You can modify your script like this:
$('#compositingWork').click(function(){
$(this).addClass('active');
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
and add this to css:
.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}
upd. but the easier way is to combine similar strings:
$(document).ready(function() {
// bind link id and id for load()
var loadDiv = {
'3DWork': 'Portfolio3D',
'GFXWork': 'motionGraphics',
'compositingWork': 'PortfolioCompositing',
'animationWork': 'PortfolioAnimation'
};
var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
links.click(function(e) {
e.preventDefault();
// remove effect from all links
links.parent('li').removeClass('active');
// and add to clicked one
$(this).parent('li').addClass('active');
// load you contant using array of ids
$('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
});
});
also I don't think you need an image for this effect. Why not using border-botom style with width and color you need?
check this example http://jsfiddle.net/vladkras/sJNMR/
(I also added "prevent default" action for your need)