We Keep Coding

Hide link if href is blank, and then display a different button?

I have a link and div within each of my list items. If the link HAS an href then I want to make sure the div is hidden within its list item and the link appear just normal.
However if the link DOES NOT have a href (e.g. href=""), then I want to add the class .show to the div so I can show it. I also want to hide the link at the same time.
Or is there a better way to do this? Thanks
<style>
.nolinkdiv { display:none; }
.show { display:block!important; }
</style>
<ul>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
</ul>

You don't need JavaScript for this:
.nolinkdiv { display:none; }
ul li a[href=""] {
display: none;
}
ul li a[href=""] + div {
display: block;
}

This is actually the proper way of doing it to hide via CSS only:
ul li a {
display: none;
}
ul li a[href^="https:"],
ul li a[href^="http:"] {
display: block; //This can be anything else rather than block, such as grid etc.
}

$( document ).ready(function() {
$('ul li').each(function(idx, li) {
var LI = $(this);
var hrefValue = LI.find("a").attr('href');
if(hrefValue) {
LI.find("div").hide()
} else {
LI.find("a").hide()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
</ul>

Adding an active class to a ul list in nav

I am trying to add a position indicator to my nav bar using the snippet below (i.e. a border should appear when a list item is selected). I currently have the rest of my css code nested using scss in the form nav{ li{/*code here */} a{/code here/}} and so on. When I add this active tag, nothing happens. Should I be formatting this differently with the active tag? Is there an easier way to do this? Why dosen't the active tag work? Thanks!!
HTML
<nav class="navbar navbar-main">
<ul class="top-menu">
<li id="home">HOME</li>
<li id="about">ABOUT</li>
<li id="info">MEDIA</li>
<li id="social">SOCIAL</li>
</ul>
</nav>
CSS
#nav ul li .active {
border-bottom:3px #FFF solid;
}
JS
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})

For starters the css is not targeting the element correctly. Your css is looking for an element with an id of nav, which doesn't exist.
The nav element has two classes (navbar and navbar-main), so you can use either to start off the selection. Because the jquery is adding a class of active to a matching link, the css rule would need to include a. To actually see the border, you'd also need to set a display property. One that is used quite often is block e.g:
.navbar ul li a.active {
display:block;
border-bottom:3px #FFF solid;
}
In the example I've provided below, I've updated the jquery to target a specific link, just for illustration purposes.
$(document).ready(function() {
var pgurl = "#about"; //Using a static value for illustration purposes.
$(".navbar ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' ) {
console.log($(this).attr("href"));
$(this).addClass("active");
}
});
});
Fiddle example

Below code will find all <a> tag whose href attribute contains the current pathname.
$(function () {
$("a[href*='" + location.pathname + "']").addClass("active");
})

This will work for you. That's how I use mine.
$(document).ready(function () {
$(".top-menu > li > a[href*='" + location.pathname + "']").addClass('active'); //the .top-menu is your ul class
});(jQuery);

Problems creating sidebar toggle dropdown menu

I'm working on http://www.variied.com/market/men/. I'm trying to create a toggle dropdown menu on the sidebar that is triggered when someone hits the "Tops" link on the sidebar, which will then toggle the content in the sub-menu to be displayed. Here's my current code
<style>
ul.category ul.sub-menu ul.sub-menu li a{
display:none
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("#menu-item-746").click(function() {
jQuery(this).next("ul.category ul.sub-menu ul.sub-menu li a").toggle();
return false;
});
});
</script>

There are a few issues in this fiddle:
You have a class called #submenu it should just be submenu
You're passing the event so you can use e.preventDefault() (unless you prefer return false)
I would suggest setting the subnav ul to display: none and just toggling that and I would use slideToggle for a nicer effect.
JS
$("#menu-item-746").click(function(e) {
e.preventDefault();
$(this).next("ul").slideToggle();
});
HTML
<ul class="submenu">
<li id="menu-item-746">Test Item</li>
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</ul>
CSS
.submenu ul{
display: none;
}
FIDDLE
UPDATE
I looked at your HTML on your site and it appears that your ul subnav is a child of your li not a sibling (it was a sibling in your fiddle). Try this:
$(this).find("ul").slideToggle();
Also from the code you have provided you are targeting an id which means this would only work for that 1 element. It appears the ones with a subnav have a class called .menu-item-has-children so I would target that, like so:
$(".sub-menu .menu-item-has-children").click(function(e) {
e.preventDefault();
$(this).find("ul.sub-menu").slideToggle();
});
NEW UPDATE
Target the a instead then:
$(".sub-menu .menu-item-has-children").on("click", " a:first", function(e) {
e.preventDefault();
$(this).siblings("ul.sub-menu").slideToggle();
});

Changing the state of an anchor to active via javascript or jquery

Im having an issue getting the state of an anchor tag to be active. Say I am on the home page, I want the home navigation link to have an active state so it has a different color. Here is what im doing at the moment. I am referencing jquery. I have stubbed in alerts to make sure my script is getting hit. Here is what I last tried.
<div class="grid__unit one-whole">
<nav role="navigation">
<ul id="nav--primary" class="navbar navbar--menu">
<li><a class="navitem" href="#">Link</a></li>
<li><a class="navitem" href="http://www.google.com">Google</a></li>
<li><a class="navitem" id="myNavButton" href="myLink">myTitle</a></li>
</ul>
</nav>
with css
a:hover, a:active {
color: #b74800;
}
and script
<script>
$(document).ready(function () {
$("#myNavButton").addClass("active");
});
</script>
EDIT 1:
I have tried adding an a.active tag to the css and script as follows, with no success.
<script>
$(document).ready(function () {
var path = location.pathname.length ? location.pathname : window.location.href;
$('.active').removeClass('active');
$("#nav--primary").find('a[href*="' + path + '"]').addClass("active");
});
</script>
with css
a:hover, a:active, a.active {
color: #b74800;
}
EDIT 2 --SOLVED

In your CSS you have missed a.active declaration. Try with:
a:hover, a:active, a.active {
color: #b74800;
}
In jQuery to get element by ID, you have to use #myNavButton, so:
$("#myNavButton").addClass("active");

So you need to do two things:
1. make a css class of a.active
a:hover, a:active, a.active {
color: #b74800;
}
2. do this in jQuery:
$(document).ready(function () {
var path = location.pathname.lenght ? location.pathname : window.location.href;
$('.active').removeClass('active');
$("#nav--primary").find('a[href*="'+path+'"]').addClass("active");
});

#nav--primary a.active {
color: #b74800;
}
Add this style.

To get the desired functionality, I ended up adding an ID to the parent list item and on document ready, I added a class to that list item. In css i added another class for this.
#nav--primary .is--selected .navitem,
#nav--primary .is--selected .navitem:hover,
#nav--primary .is--selected .navitem:focus {
background: #colorhere; /* primary nav current page background color */
color: #colorhere /* primary nav current page text color */
}
with script
<script>
$(document).ready(function () {
$("#myLiID").addClass("is--selected");
});
</script>

menu find a child of li element with jQuery

What I need to add a class on hover to the a tag with a menu below is the menu. Any ideas?
<ul id="nav">
<li>Home</li>
<li>Another
<ul>
<li>Sub</li>
...
$("#nav li ul li a").hover(
function() {
$(this).parent().parent().parent().addClass('current');
},
function() {
$(this).parent().parent().parent().removeClass('current');
//alert();
}
);

$("#nav a").hover(
function() { $(this).closest("a").addClass("current"); },
function() { $(this).closest("a").removeClass("current"); }
);

You can achieve this without jQuery by using css psuedo classes. All elements in html gain a psuedo class of :hover when the mouse is over them.
To select them in CSS:
#nav li ul li:hover {
// Your style here.
}

This method is what you need http://api.jquery.com/closest/ god bless jQuery

Might but just quicker to do this
$(document).ready(function() {
$('#nav a:hover').parents('div > ul > li:hover > a').addClass('current');
});