Develop Reference

if 'this case' and 'that case' do 'something' else do 'other something'

I'm trying to create an onClick function which only works below resolution of 768px. The function works on other resolutions such as 992px and above, but for some reason the function still works on resolution 768px itself.
following is my code:
$(document).on('click','.active-tab', function(e){
if ($(window).width() < 768) {
if($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings().slideUp("fast");
} else {
$(this).addClass('active');
$(this).parent().find('li').slideDown("fast");
}
}
e.preventDefault();
});
.active-tabs {
ul {
display: flex;
flex-wrap: wrap;
flex-direction: column;
list-style: none;
li {
display: none;
}
li:first-child {
display: block;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabs">
<ul>
<li class="active-tab">ALL</li>
<li>TAB ONE</li>
<li>TAB TWO</li>
<li>TAB THREE</li>
<li>TAB FOUR</li>
</ul>
</div>
I'm trying to achieve something like this:
for when resolution is above 768
for when resolution is below 768
the onClick function whenever below 768
Is it the syntax where I am mistaken? or perhaps I'm forgetting something?
Appreciate the help guys, thanks.

Your main problem in your post seems to unfounded, but I did notice that there were some logic errors that would cause the first click not to work properly. If you need a reference to prove your check is working, click here (becuase you can't resize a SO snippet).
A different way of achieving a similar effect
I'd first recommend fixing your anchor tag. You could add javascript:void(0) into it or simply put #.
<li class="active-tab">ALL</li>
If you are only using this code to toggle visibility
However, there is one way to further simplify your code. You can use toggle to get around one of your if structures:
$(document).on('click','.active-tab', function(e){
if ($(window).width() < 768) {
$(this).siblings().toggle("fast");
}
e.preventDefault();
});
If you need more options
Here's a version of your code that uses toggleClass.
if ($(this).hasClass('active')) {
$(this).siblings().slideUp("fast");
} else {
$(this).siblings().slideDown("fast");
}
$(this).toggleClass('active');

Please use this code
HTML
<div class="tabs">
<ul>
<li><a class="active-tab" href="">ALL</a></li>
<li>TAB ONE</li>
<li>TAB TWO</li>
<li>TAB THREE</li>
<li>TAB FOUR</li>
</ul>
</div>
css
.tabs li{
display:inline-block;
vertical-align:top;
}
.tabs li a.active-tab{
color:red;
}
#media screen and (max-width: 767px) {
.tabs li{
display:block;
}
.tabs li:not(:first-child){
display:none;
}
}
jQuery
$('.tabs').on('click','a', function(e){
if ($(window).width() < 768) {
$(this).parent('li').siblings().slideToggle("fast");
} else {
$('.tabs a').removeClass('active-tab');
$(this).addClass('active-tab');
}
e.preventDefault();
});
$(window).on('load resize', function () {
$('.tabs li').removeAttr('style');
});

get list element to be inline with parent list when using custom list counters

I have this html:
<ol>
<li>
<ol>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ol>
</li>
</ol>
and this css:
ol {
counter-increment: alpha-list !important;
}
li::before {
content: "(" counter(alpha-list, lower-alpha) ") " !important;
}
li{
list-style:none;
}
My issue is that the first li in the nested ol is not inline with the first li in the outer ol, but rather pushed down onto its own line. See https://jsfiddle.net/x2q5594y/3/.
Is there any JavaScript or CSS that can be used to put both li elements on the same line?

I've fiddled your fiddle. Is this what you mean?
https://jsfiddle.net/x2q5594y/6/
I've added these lines:
ol li::before {
float: left;
}
ol ol li::before {
float: none;
}

You need to override the default style of ol
ol {
padding : 0;
}
Updated fiddle - https://jsfiddle.net/x2q5594y/4/

add padding:0 to ol.
ol {
padding:0px;
counter-increment: alpha-list !important;
}

jQuery if else unordered list addClass

I have a ul with four li elements. I want to check to see which one has the class .selected. If the li hasClass .selected, do nothing. If another .li in the same list does NOT have the .selected class, I want to add the class .li-border. In the code example below, I can get the console.log to fire but not the addClass. What am I missing? Thanks!
if ($("ul.portfolio-nav li a").hasClass("selected")) {
console.log("yo");
} else {
$(this).addClass("li-border");
};

Try this code :
$("ul.portfolio-nav li a").each(function(){
if ( !$(this).hasClass("selected") ) {
$(this).addClass("li-border");
};
});
.li-border{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='portfolio-nav'>
<li><a href='#'>First element</a></li>
<li>Second and selected element</li>
<li><a href='#'>Third element</a></li>
</ul>
Hope this helps.

The :not selector should do the trick:
$("ul.portfolio-nav li a:not(.selected)").addClass('li-border');
Or alternatively use the '.not' function, as suggested by jQuery documentation:
$("ul.portfolio-nav li a").not(".selected").addClass('li-border');

Here's an example. It should be easy to replace the styles with the one you want.
$(document).ready(function() {
$("#list-items li").each(function() {
if (!$(this).hasClass('selected')) {
$(this).addClass('disable');
}
});
});
li:hover,
.selected {
text-decoration: underline;
cursor: pointer;
color: black;
}
.disable {
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list-items">
<li>List item</li>
<li>List item</li>
<li class="selected">Selected item</li>
<li>List item</li>
</ul>

Don't over complicate yourself. Just remove all li-border class then add it to the one set you want to match too.
https://jsfiddle.net/da98dmgt/7/
$("ul.portfolio-nav li").click(function(){
$("ul.portfolio-nav ul li").removeClass("li-border");
$(this).siblings("li").addClass("li-border");
});

Jquery - dropdown menu on click

I am relatively new to jquery and I am seeking help. The aim is to click on a list item attached to a ul and have it appear whilst any other list items disappear. Only the active one is viewable
The Issue I am having is that when I click on another list item the active one disappears (as intended), but it doesn't reveal the other one, it remains hidden. I am looking for a way to reveal the list, while hiding the ones that are in-active.
I have uploaded my problem: http://jsfiddle.net/CbU4d/
html:
<div id="secondary-nav"><!--secondary-nav-->
<ul>
<li>Current Article
<ul>
<li>Example 1</li>
</ul>
</li>
<li class="active">Past Articles
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</li>
</ul>
</div><!--/secondary-nav-->
css:
#secondary-nav {
float:left;
height:auto;
width:23%; /*210px*/
border-right:2px solid #000;
position:relative;
}
/*heading styles*/
#secondary-nav ul li {
padding: 0 10px;
list-style-type: none;
}
#secondary-nav ul li a {
font-family:TrajanPro;
font-size:1em;
line-height: 32px;
color:#000;
}
/*links*/
#secondary-nav ul ul li a {
display: block;
font-family:TrajanPro;
font-size:0.9em;
line-height: 27px;
text-decoration: none;
color:#000;
transition: all 0.15s;
}
#secondary-nav ul li a:hover {
display:block;
color:#af2931;
text-decoration:underline;
}
#secondary-nav ul ul {
display: none;
}
#secondary-nav li.active ul {
display: block;
}
/css
jquery using 1.7.1
$(document).ready(function(){
$("#secondary-nav ul").click(function(){
//slide up all the link lists
$("#secondary-nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})

Try with
$("#secondary-nav ul ul").slideToggle();
Demo

I got it to work (I think) by making two changes:
Change the selector on line 2 to this:
"#secondary-nav ul li"
This means the event will be attached to the list item you click, not the entire list.
Remove the if statement on line 6. Since we're hiding all of the second level uls in the previous line, we don't need to check if it's visible; we know it isn't.
Change line 6 to this:
$(this).children('ul').slideDown();
This is because the ul you want to unfold is a child of the li you're clicking, not a sibling.
Here's my fixed jsFiddle.
Edit: If you want to stop it from hiding and re-showing when you click the one that's already expanded, just chuck this at the top of the handler:
if ($(this).children('ul').is(':visible')){
return
}

Keep submenu while moving mouse

I want to make a menu (with submenu and div containing link for every submenu on hover).
Something like this:
AAAA | BBBB
| bbb1
| bbb2 HERE IS MOUSE (bbb2 LINK)
| bbb3
It is possible to keep listing submenus when you try to open link? If you move mouse from "bbb2" link disappear.
what I have now:
http://i.imgur.com/vhFtaQc.png
and what I want:
http://i.imgur.com/BOQNMat.png
Here is JSFiddle: http://jsfiddle.net/zu8Eu/
Hope you understand. Thanks!

As is noted you may need to nested the <div> inside the li elements. But additional to keep the hover() you can use padding to set the white space:
HTML
<li id="submenu1">
aaaa1
<div class="one">
Link for aaa1
</div>
</li>
CSS
.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}
The demo http://jsfiddle.net/zu8Eu/27/

I'm sure the are jQuery plugins that will provide you with what you want to achieve, but I'd say restructure you HTML and nest the elements properly.
<ul>
<li>Menu 1
<ul>
<li>
Submenu 1
<ul>
<li>
Subsub menu
</li>
</ul>
</li>
</ul>
</li>
</ul>
This way, you can use CSS to achieve what you want:
ul li ul{
display: none;
}
ul li:hover > ul{
display: block;
}
ul li ul li:hover > ul{
display: block;
}
Once you hover on the first li, it will show the direct child ul, if you hover on that ul, it will still count as a hover on the first li, meaning it'll still be visible.
Fiddle: http://jsfiddle.net/x54gZ/