Develop Reference

How to show an element only on click on it and and hide it on click on other elements?

Description: I created two buttons and two more elements (div & section).
When I click on button 1, div element will appear with background-color HotPink and/if at this moment i re-click on button 1, div element will disappear.
I also wrote a function for button 2 so that when i click on button 2, section element will appear with background-colour DarkGreen and at this moment when i click on button 2 again, section element will disappear.
I should mention that if i click on white space of body ( (document).click(event) ), both div and section elements will disapear.
Question: What function should I write to show div element when I click on button 1 and then I hide hide it when I click on button 2 or any other elements on my web page???
Demo
NOTE: I duplicated this question because I'm not interested to use any method like:
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
$(".section").css("display","none");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
$(".div").css("display","none");
}else{
$(".section").css("display","none");
}
});
It would be better if you do a favour and suggest a better method instead of duplicating a line of code with different class name under different events (functions).
My codes:
HTML:
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>
JQuery:
$(function(){
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});
$(document).click(function(){
$(".div").css("display","none");
$(".section").css("display","none");
});
});

The easiest way would be to start .click functions for both button 1 & 2 with:
.css("display","none");
function hidding the other element, like this:
$(".button1").click(function(event){
$(".section").css("display","none");
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
$(".div").css("display","none");
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});

Solution without JQuery... But you can use it if you really want to.
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
$('.button1').addEventListener('click', ()=>{
toggle('div')
});
$('.button2').addEventListener('click', ()=>{
toggle('section')
});
function toggle(element){
if($('.show')){
Array.from($$('.show')).forEach((ele) => {
ele.classList.remove('show');
});
}
$(element).classList.add('show');
}
html, body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.show {
display: block;
}
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br>
<br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

This solution relies on event bubbling, so it might break if other handlers stop propagation.
Also note that it currently relies on provided html structure, but that can be tweaked easy enough.
$(document).click(function(e) {
$elem = $(e.target)
// If the element is visible we shouldn't open it again
needToggle = $elem.is('button') && !$elem.next().hasClass("open")
$(".open").removeClass("open") // Remove all open elements
if (needToggle) {
$elem.next().toggleClass("open")
}
})
html,
body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

Getting a specific item to become unchecked by clicking it

I have a custom drop down menu, in which I am using to fill a div with the selections when .is(":checked"). The divs are filling correctly, but I am having some trouble figuring out how to remove the selections in the div.
I think the reason I am having troubles is because the div is only filling with the inputs value. I am unsure of how to remove this value from the proposal-type div and then repopulate the drop list with the item removed, when clicking the x icon. So essentially, exactly the opposite as filling it.
Does anyone see what I have to do to remove the values in the proposal-type div, when clicking the x-icon for the drop-item-selected divs and then how to show the input again in the drop down?
Sorry if any of this is unclear. Please ask any questions if you need more clarity.
$( '#proposal-type' ).click( function () {
$( '#proposal-type-drop' ).addClass( 'active' );
} );
$( '.drop-item-input' ).on( 'change', function () {
var proposalVal = "";
var proposalHtml = "";
$( '.drop-item-input' ).each( function () {
if ( $( this ).is( ":checked" ) ) {
proposalVal += $( this ).val();
proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $( this ).val() + '</div>';
$( this ).closest( 'label' ).fadeOut();
};
$( '#proposal-type' ).val( proposalVal ).html( proposalHtml );
$( '#proposal-type-drop' ).removeClass( 'active' );
} );
//values
var type = $( '.drop-item-input:checked' ).map( function () {
return $( this ).val();
} ).get().join( ', ' );
console.log( type );
} );
//Uncheck/remove
$( '.drop-item-close' ).click( function () {
$( this ).is( ":checked" ) === false;
$( this ).closest( 'label' ).fadeIn();
$( this ).closest( '.drop-item-selected' ).fadeOut();
} );
#proposal-type {
border: 1px solid #858585;
height: 20px;
}
#proposal-type-drop {
width: 45%;
height
display: none;
position: absolute;
}
#proposal-type-drop.active {
background: rgba(0, 0, 0, 1);
display: block;
height: auto;
z-index: 1;
}
.drop-item {
color: #FFF;
font-size: .9rem;
padding: 5px;
background: #000;
display: block;
width: 100%;
cursor: pointer;
}
.drop-item-close {
display: inline-block;
background-image: url("https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/white_capitol/capitol_X_white.png");
background-size: 10px 10px;
background-repeat: no-repeat;
height: 10px;
width: 10px;
margin-right: 10px;
cursor: pointer;
}
.drop-item-input {
display: none;
}
.drop-item-selected {
background: blue;
padding: 5px;
font-size: .9rem;
width: auto;
display: inline-block;
margin: 0 3px;
}
.proposal-text {
width: 95%;
display: block;
height: 6em;
margin: 1.5% 2% 2.5% 2%;
!important
}
#proposal-check {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="proposal-type" name="proposal_type" class="proposal-input" data-text="Make Selection"></div>
<div id="proposal-type-drop">
<label class="drop-item">A<input type="checkbox" class="drop-item-input" value="A"></label>
<label class="drop-item">B<input type="checkbox" class="drop-item-input" value="B"></label>
<label class="drop-item">C<input type="checkbox" class="drop-item-input" value="C"></label>
</div>

Your code was too difficult to understand, so I simplified it a little bit.
converted the input blocks to regular html divs.
converted the checkboxes to spans
on click event, I populated a hidden input array.
disabled inputs won't send data to the server, so I used this as an advantage for this kind of situation.
// click event for selectable proposals, assigned them to document to keep the events after attach/detach
$(document).on("click", ".available-proposals .proposal", function(event) {
// after fadeout
$(this).fadeOut("medium", function() {
// set the new container
var newContainer = $(this).closest(".proposal-container").find(".selected-proposals");
// detach the item and move it to the container of the selected ones
$(this).detach().appendTo(newContainer).fadeIn().css("display", "inline-block");
// remove the disabled attribute, so it can send data
$(this).find("input[type='hidden']").removeAttr("disabled");
});
// remove sub event triggers
event.preventDefault();
});
// click event for the X close labels in the selected proposals
$(document).on("click", ".selected-proposals .proposal .close", function(event) {
// select the main proposal object, because the event sender is the close label.
var $this = $(this).parent(".proposal");
// find the new container (old container which has available items)
var newContainer2 = $this.closest(".proposal-container").find(".available-proposals");
// after fadeout
$this.fadeOut("medium", function() {
// detach the item and move it to the container of the selectable ones
$this.detach().appendTo(newContainer2).fadeIn().css("display", "block");
// add the disabled attribute to the input, so it can't send data to the server
$(this).find("input[type='hidden']").attr("disabled","disabled");
});
// remove sub event triggers.
event.preventDefault();
});
.available-proposals .close {
display: none;
}
.selected-proposals .close {
display: block;
font-size: 11px;
background: #eee;
color: #000;
font-weight: bold;
float: right;
padding: 2px;
border-radius: 10px;
}
.available-proposals .proposal {
background: darkblue;
color: white;
width: 100px;
height: 20px;
display: block;
}
.selected-proposals .proposal {
background: cyan;
color: black;
display: inline-block;
width: 100px;
height: 20px;
border: 1px solid black;
padding: 3px;
margin: 3px;
}
.available-proposals {}
.selected-proposals {
border: 1px solid black;
min-height: 20px;
position: relative;
}
.selected-proposals .proposal {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="proposal-container">
<div class="selected-proposals"></div>
<div class="available-proposals">
<div class="proposal">A<span class="close">X</span>
<input type="hidden" name="selected_proposals[]" value="A" disabled="disabled" />
</div>
<div class="proposal" data-value="B">B<span class="close">X</span>
<input type="hidden" name="selected_proposals[]" value="B" disabled="disabled" />
</div>
<div class="proposal" data-value="C">C<span class="close">X</span>
<input type="hidden" name="selected_proposals[]" value="C" disabled="disabled" />
</div>
</div>
</div>

Change Icons on toggle in my navigation bar

I'm trying for about 2 hours now to get something so simple done but there seems to be something in the way that blocks my function from working, I don't understand what causing the function not to work and how can I get it to show the icons change on a click.
any help would be much appreciated, please see the link below, resize your browser a bit so you will see the menu toggle.
I am trying to change the div class to menu-close and not menu-toggle on click so there will be a different icon.
here is the link to see it on the website:
http://didyouknowfacts.org/animals/
here is my html + javascript:
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="col-width">
<script>
$(function() {
$( "#openclose" ).click(function(){
$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
$( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );
});
});
</script>
<div id="openclose" class="menu-toggle"><?php _e( 'Menu', 'theme-name' ); ?></div>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'theme-name' ); ?></a>
</div>
<?php wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>
</nav><!-- #site-navigation -->
here is the css:
.menu-toggle {
cursor: pointer;
font-size: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 17px;
right: 10px;
text-align: center;
}
.menu-toggle:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 30px/1 FontAwesome;
text-decoration: inherit;
vertical-align: text-bottom;
color: #fff;
content: "\f0c9";
margin: 0;
}
.menu-close {
cursor: pointer;
font-size: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 17px;
right: 10px;
text-align: center;
}
.menu-close:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 30px/1 FontAwesome;
text-decoration: inherit;
vertical-align: text-bottom;
color: #fff;
content: "\f00d";
margin: 0;
}

What I bet is happening is that when you frist write this
$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
all .menu-toggle objects "switch" into menu-close objects, meaning you only have a bunch of .menu-close objects in your dom. And when you later then write this:
$( ".menu-close" ).switchClass( "menu-close", "menu-toggle", 1000 );
all you .menu-close objects turn into .menu-toggle, meaning all your objects are now .menu-close.
Therefore we just change your click function to inluce a pointer to the currently clicked menu item.
$( "#openclose" ).click(function(){ //If this is not a unique name then it should by the way be a class, not an id.
$( ".menu-toggle" ).switchClass( "menu-toggle", "menu-close", 1000 );
$( this ).switchClass( "menu-close", "menu-toggle", 1000 })
})

If I go to your web page, I see the error "Uncaught ReferenceError: $ is not defined". jquery is defined below your script, so $(function() ... does not get executed at all.

Try using the addClass() and removeClass(). If you want to toggle it, you can use if else statements.
$(document).ready(function(){
$("button").click(function(){
$('.blue').addClass('orange');
$('.orange').removeClass('blue');
$('div').animate({borderRadius: "100px"})
});
});
.blue{
height: 150px;
width: 150px;
border-radius: 5px;
border: 1px solid black;
background-color: royalblue;
}
.orange{
background-color: orange;
height: 150px;
width: 150px;
border-radius: 5px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blue'></div>
<button> Change Color</button>

Disappearing drop down menu

I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}

Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.

You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>

With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>

Issue with set focus on conformation box in jquery/javascript?

On click of button i need to see a custom conformation dialogue box. I am able to see it but once the dialogue box has opened then I don't want to perform any action in HTML page until user select any option in dialogue box. I mean just similar to alert box functionality, until we say "Ok" in alert box the control does not go to HTML page. I need the same , My code is as follows,
Css
<style>
#confirmBox {
z-index:9999;
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: relative;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirmBox .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirmBox .button:hover {
background-color: #ddd;
}
#confirmBox .message {
text-align: left;
margin-bottom: 8px;
}
</style>
Script:
$( "#locationList" ).on( "click", "li", function( event ) {
var form = $(this).closest('form');
doConfirm("The Coordinates for Selected location are "+ coodinatesDetails, function yes() {
alert("mail");
}, function no() {
//alert("Ok"); -- Do Nothing
} , function sms()
{
alert("sms");
});
});
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
HTML:
<div id="confirmBox">
<div class="message"></div>
<span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>

You will only need an overlay to accomplish this. Try something like this: http://jsfiddle.net/7MJBR/1/
Html Changes:
<div id="confirmOverlay"></div>
<div id="confirmBox">
<div class="message"></div> <span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
CSS Changes:
#confirmOverlay {
position:fixed;
background: rgba(0,0,0,.5);
z-index: 9998;
width:100%;
top:0px;
left:0px;
}
Javscript Change:
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
$("#confirmOverlay").height( $(window).height() );
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
$("#confirmOverlay").hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
The Overlay having a Z-index of 1 below your popup, and the fact that it covers the screen will prevent people from accessing the content below. I provided filler content in my JSFIDDLE to show this.
Once the dialog and overlay are no longer needed; $('#confirmOverlay').hide() or $('#confirmOverlay').fadeOut(200) will make it go bye bye. :)
I hope this helps! Let me know if you have questions.