Develop Reference

click then unclick jquery button not working

I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.

$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!

jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});

IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

How do you pass an instance of the control being clicked when adding the on click from jquery?

I am working on a side navigation bar and have a label around the actual links in the sidebar to provide padding and borders. I would like the user to be able to click anywhere in this label and go to the link. I wrote this function for that:
function allowLabelClick(control) {
$(control).find('a')[0].click();
}
If you add this inline to the onclick of an individual label and pass (this) as the paramter, it works fine. However I basically have 100 or so links all with the class 'outerLabel' and don't want to add an onclick to each one manually. Instead I'd like to add it to all elements with the class outerLabel. To do that I wrote this line:
$('.outerLabel').on("click", allowLabelClick());
in my javascript. However I don't know what to pass in the parameter for allowLabelClick. I want it to be the DOM element that was clicked on but "this" doesn't work and I'm not sure what else to try.
Thanks

Use an anonymous function:
$('.outerLabel').on("click", function() { allowLabelClick(this); });

Actually you don't need JS for this. You can solve this with css
.nav a {
display: block;
padding: 10px;
margin: 10px;
...
}

JavaScript: How can I change the class of a div by clicking another div?

I want to make a div appear when I click on another div. I was thinking of doing this by using JavaScript to change the class of the div when the other div is clicked on.
This is the HTML of the div I want to appear:
<div id="menutext1" class="hidden"></div>
This is the HTML of the control div (the one to click on to make the above div appear):
<div id="menu1"></div>
This is the CSS:
.hidden { display: none; }
.unhidden { display: block; }
I've looked everywhere and nothing seems to work for me!
I don't have much experience with JavaScript or JQuery but I can understand it.
Thanks in advance :))

.addClass(), .removeClass() should do what you need. .toggleClass() might also be useful. You want to do something like this in your onClick() method:
$('#menu1').click(function() {
$('#menutext1').addClass('unhidden')
});
Swap in toggleClass() if you want to be able to hide/unhide. I should add that these are JQuery functions so make sure to include JQuery in your project.

You have several options to achieve this:
$('#menu1').on('click', function(){
$('#menutext1').show();
// OR
$('#menutext1').toggleClass('hidden unhidden');
// OR
$('#menutext1').removeClass('hidden ').addClass('unhidden');
});
Demo
Note: When working with jQuery and DOM-Manipulation have a look at the .ready() function.
Reference
.on()
.toggleClass()
.removeClass()
.addClass()
.show()

You can do it without JQuery using the classList.toggle method. And you don't really need the unhidden class. When the hidden class is toggled off, the div should return to its default display (block).
// get the element you want to click on
var controlDiv = document.getElementById('menu1');
// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
// turn the hidden class off or on
document.getElementById('menutext1').classList.toggle('hidden');
});

jQuery set class not working after its already been set

trying to make a simple expanding heading script.
I don't wish to use accordions and just looking for a light weight home made solution. As i enjoy writing and learning things myself.
In my eyes, what i have should work. But it doesnt.
The aim is:
When a heading is clicked, all of the content is hidden and then the next content element after the heading is shown. This prevents more than one content being shown at any time.
After this, the div class gets changed to be a 'selected' state.
This works okay.
However, the next part runs if the heading class is the selected state, and if so it SHOULD change its class back to the normal and also hide the next element content.
The aim is to allow the hide / show options.
The latter part of changing back the class doesnt work however. I also know there is a much for efficient way of writing this, but not sure how.
JS:
$(function() {
$('.headingHelp').click(function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$('.headingHelp_sel').click(function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
});
Example HTML:
<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content
</div>
<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>
JSFiddle: http://jsfiddle.net/C7bHn/1/
Thanks in advance!

Since your "selected" class is added after the DOM is loaded, jQuery is not aware of it.
I suggest using jQuery's on() for delegated events. This will allow you to select dynamically generated classes:
$(document).on('click','.headingHelp',function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$(document).on('click','.headingHelp_sel',function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
Working Example (jsfiddle)
Edit:
Here's another method without using delegation. It just adds/removes a "sel" class rather than changing the class completely.
$('.headingHelp').click(function(){
// save clicked element in a variable for use below
$this=$(this);
// remove / add "selected" class
$('.headingHelp').removeClass('sel');
$this.addClass('sel');
// fade in / out content
$('.infoHelp').fadeOut();
$this.next('.infoHelp').stop().fadeIn();
});
.infoHelp {
display: none;
}
.headingHelp {
background-color:#999;
padding: 1%;
cursor: pointer;
color: white;
}
.headingHelp:hover,
.headingHelp.sel {
background-color:#666;
}
Working Example (jsfiddle)

jQuery selector working "AT CURRENT MOMENT" . Your selector $('.headingHelp_sel') empty when running this code.
Best code:
$(function() {
$('.headingHelp').click(function(){
var open = $(this).next('.infoHelp').is(':visible');
$('.infoHelp').fadeOut();
if(!open)
{
$(this).next('.infoHelp').fadeIn();
}
});
});

Understanding the logic behing a menu with active elements

I have a css rule like this:
.foo:active {
background-position: 0px -382px;
}
.foo is applied to an anchor.
I have a set of several buttons displayed side by side.
I need to have a very common behaviour here:
When the user clicks on button 1, it stays active.
If the user clicks on button 2, that should be active and the orders shouldn't.
If we click on button 3 the same thing... and so on...
So, we should only allow one active button.
Can we deal with this using javascript or should we rely on a server side language?
Perhaps javascript will do the job, since, here, we are not refreshing the page each time the user clicks on one of those buttons.
What is the logic behind this ?
Update:
I should add something to onclick event, I should allow to onclick, apply a class that places the background in a way that the element looks active. But, I'm not sure, how to deal with the part that ONLY ONE of those 9 should be active. :s
Note: should I provide more details, please, let me know.
CODE SAMPLE:
function showDetails(eid){
$.post(baseUrl+"/index/show.details",{id:eid},function(e){
...
//remove ativoFinalista class from all elements with .botoesEquipas class.
$('.botoesEquipas').removeClass('ativoFinalista');
//add the class to the clicked element
$(this).addClass('ativoFinalista');
}, 'json');
}
Css:
I have nothing defined for .botoesEquipas.
.ativoFinalista {
background-position: 0px -130px;
}
The anchor:
<a class="botoesEquipas botaoFinalista<?php echo $e["cod_team"];?>"
href="javascript:;" onclick="showDetails(<?php echo $e["cod_team"];?>)"><?php echo$e["name"];?></a>

You can use jQuery, but note that a class fooactive is needed:
$('.foo').click(function() {
$('.foo').removeClass('fooactive'); // Remove active class from all elements of class foo
$(this).addClass('fooactive'); // Add active class to this specific one
});
Then code CSS like:
.foo { /* default foo style */ }
.fooactive { /* extra styles when active */ }
Edit: You bind click functions the old way. In that case, pass the element like:
onclick="showDetails(123,this)"
and
function showDetails(eid, element){
$('.foo').removeClass('fooactive');
$(element).addClass('fooactive');
}
http://jsfiddle.net/eEJma/

I would use jQuery. There is no need to call back to a server-side language:
Logic:
Remove all active classes
Add active to the clicked button.