Develop Reference

Reset function once you already click it

Hi im new on js and honestly speaking we're just starting learning js on our school. What i want to do is once i already click it it will be reset and remove the class again. "myClass has a display none"
$(function() {
$("body").click(function() {
$(".parela").addClass('myClass');
});
});

You can use toggleclass
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});

Use toggleClass, so at every click it will be added/removed automatically
$(function() {
$("body").click(function() {
$(".parela").toggleClass('myClass');
});
});

You want to use toggleClass() which will toggle the class on and off depending on the click. note that for the demo below - I created the button that toggles the class on the button click.
Another way of doing it - since the only effect is to hide the element - is just .toggle() which toggles the display state without the use of the added class. The following snippet shows both methods.
$(function() {
$("#toggleButton").click(function() {
$(".parela").toggleClass('myClass');
});
$("#toggleButton2").click(function() {
$(".parela2").toggle();
});
});
.myClass{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Using .toggleClass('myClass')</p>
<button type="button" id="toggleButton">clickMe</button>
<span class="parela"> Visible</span>
<hr/>
<p>Using just .toggle()</p>
<button type="button" id="toggleButton2">clickMe</button>
<span class="parela2"> Visible</span>

You can you use some sort of 'flag' variable to control the state.
You can name it whatever you want and make if statement to make decisions accordingly.
$(function() {
var flag = false;
$("body").click(function() {
if(!flag) {
$(".parela").addClass('myClass');
flag = true;
} else {
$(".parela").removeClass('myClass');
flag = false;
}
});
});

jquery toggle/untoggle add/remove class

I have this piece of code here:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function () {
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
}, function () {
$(".plus-area-current i").removeClass("fa-minus");
$(".plus-area-current i").addClass("fa-plus");
});
});
When the user clicks plus-area-current, current-communities gets untoggled, what I am trying to is add / remove the fa-plus and fa-minus classes from an element pending if the element current-communities is toggled or not. This code above does not work, the element toggles but the class does not change, if I do this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").removeClass("fa-plus");
$(".plus-area-current i").addClass("fa-minus");
});
It works, but when I click to toggle it back up, its does not change back to the plus.

Use toggleClass() instead:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle();
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
If you'd prefer the class change not to happen until the slideToggle() animation has completed, place that line within the callback, like this:
$('.plus-area-current').click(function () {
$(".current-communities").slideToggle(function() {
$(".plus-area-current i").toggleClass("fa-plus fa-minus");
});
});

toggleClass for different functions

I guess this code does not work, because at DOM load jQuery caches its objects and bind the functions to them?
$('span.button.slide_out').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('span.button.slide_in').on('click', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
I know I could write this easily with slideToggle or something else, but I have to fire different actions on every first and every second click. How can I achieve this using the same selector (instead of creating two different selectors)?
JS FIDDLE

The binding is indeed done on DOM creation, but that doesn't have to be a problem in this case, it also means that the button is still clicked if it no longer has the slide_out class. Therefore you can reuse the same click event and check the current state to choose whether to slide up or down. For example:
$('.slide_out').on('click', function () {
if($(this).toggleClass('slide_out slide_in').hasClass('slide_in'))
$('#testbox').slideDown();
else
$('#testbox').slideUp();
});
Fiddle

You could use the solution from Event binding on dynamically created elements?, as suggested by https://stackoverflow.com/users/502381/juhana:
HTML:
<span class="button_container"><span class="button slide_out">Click me</span></span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button_container').on('click', '.slide_out', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideDown();
});
$('.button_container').on('click', '.slide_in', function () {
$(this).toggleClass('slide_out').toggleClass('slide_in');
$('#testbox').slideUp();
});
http://jsfiddle.net/ag3cpcfb/
But, in my opinion it would be better to make your code simpler by using slideToggle() and adjust your css classes:
HTML:
<span class="button">Click me</span>
<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>
JS:
$('.button').on('click', function () {
var $testbox = $('#testbox');
if ($testbox.is(':visible')) {
console.log('Click 1');
} else {
console.log('Click 2');
}
$(this).toggleClass('slide_in');
$testbox.slideToggle();
});
http://jsfiddle.net/k77ferjh/
But this fires "Click 1" all of the time if you repeatedly click on the button. If this is not an issue, fine, if it is, you can also use a number to keep track of your clicks:
JS:
var clicks = 0;
$('.button').on('click', function () {
clicks++;
if (clicks % 2 == 0) {
console.log('Slide out');
} else {
console.log('Slide in');
}
$(this).toggleClass('slide_in');
$('#testbox').slideToggle();
});
http://jsfiddle.net/k77ferjh/1/

jquery Navigation show and hide multiple pages

Being asked to make an SPA pizza place and running into issues with the show and hide feature. only the home page shows at all times
<nav>
<div>
<ul>
<li>Sicilian Home</li>
<li>Sicilian Menu</li>
<li>Sicilian About</li>
</ul>
</div>
</nav>
$(document).ready(function ()
{
$("navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}

Your CSS selectors are incorrect. Base on your HTML you need to use id selectors:
$("#navHome").click(function (event) {
$("#home").show();
$("#menu, #about").hide();
});
$("#navMenu").click(function (event) {
$("#menu").show();
$("#about, #home").hide();
});
$("#navAbout").click(function (event) {
$("#about").show();
$("#home, #menu").hide();
});
Also there is a difference: $("menu", "about") means "find menu tag within about tag", while $("#menu, #about") means "find element with id menu and element with id about".

I copied your javascript and html to simulate the issue. I added alert statements in the functions to check if the click event is captured in the first place. But, the alert statements themselves were not coming up.
You need to make following two changes to your script to work:
prefix # with the ID's to capture the click event
a closing ) is missing at the end of the script
Please find below the final script:
$(document).ready(function ()
{
$("#navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("#navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("#navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}
)

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});