We Keep Coding

I have two values in href and I want to use both values one by one

I have two values in href and I want to use both values one by one. Can
anyone help me how I do this? Below I put my code which I tried. It's working in first step. That means the value is set when I click first time but the value is not set when I clicked on same element the second time.
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>

What you're doing is replacing the href with first click, so removing the second entry - consider using a different attribute, like data-href
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('data-href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
/* added for display */
a {
cursor: pointer;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
<a data-href="#123,#321">Link 1</a>
<a data-href="#456,#654">Link 3</a>
<a data-href="#789,#987">Link 2</a>
</div>

Change your links to Link 2 and then use $(this).attr('data-href').
Problem was that when you updated .attr('href', sliptLink[0]) it would remove the second #123 from the original href
demo
$(document).ready(function() {
$('.parent a').click(function(e) {
e.preventDefault()
var link = $(this).attr('data-href');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<div class="parent first">
Link 1
Link 3
Link 2
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

check this, because the second time, your href has only one value, that too without comma
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('href');
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', link);
console.log(link);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>

Your first click just set href to sliptLink[0].
So that the 2nd click won't know what sliptLink[1] is.
This could be done with a separated data-attribute (E.g: data-link).
$(document).ready(function() {
$('.parent a').click(function() {
var link = $(this).attr('data-link');
var sliptLink = link.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
console.log(sliptLink[1]);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent first">
Link 1
Link 3
Link 2
</div>

just Declare Global Variable;
var glink=null;
$(document).ready(function () {
$('.parent a').click(function () {
if(glink==null)
glink = $(this).attr('href');
var sliptLink = glink.split(',');
var firstLink = sliptLink[0];
var secondLink = sliptLink[1];
/* this code execute when parent has class first */
if ($(this).parent().hasClass('first')) {
$(this).attr('href', sliptLink[0]);
$(this).parent().removeClass('first');
} else {
$(this).attr('href', sliptLink[1]);
$(this).parent().addClass('first');
console.log(sliptLink[1]);
}
});
});

With Vanilla JS
Array.from(document.querySelectorAll('.parent a')).forEach((e) => {
e.addEventListener('click', () => {
var links = e.hash.split(',');
console.log(links);
})
});

How can I hide my drop-down menu option(s)?

I have a dropdown-menu, Class View is my default option.
When I clicked on the arrow, I have this
I tried to hide Class View option, and set Geary, Mia as my default option. I couldn't get it to hide.
HTML
<div class="row cb-btns-row " style="background-color:white;">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
<ul class="dropdown">
<li><a id="class-view" href="#">Class View</a>
</li>
<li><a id="student#1" class="student" href="#">Geary, Mia</a>
</li>
</ul>
</div>
</div>
</div>
JS
// dropDown Menu
function dropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
dropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
return false;
});
obj.opts.on('click', function () {
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue: function () {
return this.val;
},
getIndex: function () {
return this.index;
}
}
$(function () {
var dd = new dropDown($('#dd'));
$(document).click(function () {
$('.wrapper-dropdown-1').removeClass('active');
});
var $student = $('.student');
var $classView = $('.classView');
$classView.hide(); // I tried
});
What I have
Live Result = http://jsfiddle.net/bheng/8cnz2r67/1/show
Live Code = http://jsfiddle.net/bheng/8cnz2r67/1/

You have mistaken the jquery selector for class-view which is id and not class. So put # instead of . and then hide it's parent li using closest(). Also to set the default value, set student's text in first span under .wrapper-dropdown-1
var $student = $('.student');
var $classView = $('#class-view');//its id and not class
$classView.closest('li').hide(); //hide parent li
//set default as student
$('.wrapper-dropdown-1').find('span:first').text($student.text());
JSFiddle Demo

Here a working demo: http://jsfiddle.net/8cnz2r67/9/
Javascript
dropDown.prototype = {
//...
setDefault: function(def) {
this.placeholder.text(def)
}
}
In the document.ready:
var dd = new dropDown($('#dd'));
dd.setDefault($(".default").text())
And just add a default class to the element that you wanna set to default.
Hope it helps you! ;)

You can try following by replacing
$classView.hide(); // I tried
with
$('.wrapper-dropdown-1').addClass('active');
$student.click();
JSFiddle Demo

toggleClass on hyperlink not working

I'm working with the following code:
http://jsfiddle.net/k5pnj4a4/8/ however my 'toggleClass' isn't working. Try the example in jsFiddle. Basically if I click the link, it goes red as expected but click again & it doesn't return to the original state :-(
Javascript:
$(document).ready(function(){
$('.filters a').on('click', function() {
var data_filter = $(this).closest("a").data('filter');
$(this).addClass('active');
if($(this).hasClass('active')) {
localStorage.setItem(data_filter,true);
} else {
localStorage.setItem(data_filter,false);
}
});
$('.filters a').each(function(){
var data_filter = $(this).closest("a").data('filter');
var checked = localStorage.getItem(data_filter);
if(checked){
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
HTML
<div class="filters">
<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
<li class="filter-option">Black</li>
<li class="filter-option">Blue</li>
</ul>
</div>
Can someone provide assistance with this?
Thank you

Try this:
$(document).ready(function(){
$('.filters a').on('click', function() {
if($(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
});

Javascript button snap.js

How would I create a Toggle button with snap.js found here https://github.com/jakiestfu/Snap.js the usage section is very brief and I don't understand. Here is some code I came up with. I am new to javascript and any help is appreciated.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>

You need to get the button element before adding click listener on it. Also, markup for id attribute is wrong on the button.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
// Get the button
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
EDIT: Updated the answer to use document.getElementById rather than jQuery.

It looks like there's an error in your JavaScript (unless you've omitted some code.)
var snapper = new Snap({
element: document.getElementById('content')
});
// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});

addEvent(document.getElementById('toggleButton'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});

How to make my menu links clickable

I have the following page: http://pastebin.com/sJAN1jkk which contains a dropdown navigation menu, consisting of several unordered lists.
The dropdown part of the menu, works without issue, the problem is, that when clicking any links within these lists, nothing happens.
I have a feeling it's down to the javascript somewhere, but not being an expert, I'm at a loss to explain why.
Any help would be greatly appreciated.
If I've missed any relevant/needed info, please let me know, and I will update the question.
----Edit----
Menu HTML:
<div class="rotaWrapper">
<div id="ddRotas" class="wrapper-dropdown-rotas" tabindex="1">
<span id="lblRotasMenu">Rotas and absences</span>
<ul class="dropdown">
<li><a id="hypRotas" href="Rotas.aspx">Rotas</a></li>
<li><a id="hypAbsence" href="Absence.aspx">Absences</a></li>
<li><a id="hypTraining" href="Training.aspx">Training</a></li>
</ul>
</div>
</div>
Javascript:
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
},
}
$(function() {
var ddRotas = new DropDown( $('#ddRotas') );
var ddWages = new DropDown( $('#ddWages') );
var ddMessages = new DropDown( $('#ddMessages') );
var ddDocs = new DropDown( $('#ddDocs') );
var ddAdmin = new DropDown( $('#ddAdmin') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-rotas').removeClass('active');
$('.wrapper-dropdown-wages').removeClass('active');
$('.wrapper-dropdown-docs').removeClass('active');
$('.wrapper-dropdown-messages').removeClass('active');
$('.wrapper-dropdown-admin').removeClass('active');
});
});
</script>

I think this might be your problem:
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
You are capturing all click events for your dropdown and then returning false. This stops the click event from firing.