Hiding a button on click - javascript

Trying to hide a button on click using Bootstrap/JavaScript. Here is my button code:
I understand
Here is my script:
<script type="text/javascript">
function hidebtn(){
document.getElementById('menu-toggle').style.display = 'none';
}
</script>
It isn't working, any thoughts? Thanks!

Try it with jQuery:
function hide(){
$( "#button" ).addClass( "hide" );
}
HTML & CSS:
<a id="#button" onClick="hide()">Button</a>
#button.hide {
display: none;
}

function hideBtn()
{
document.getElementById('menu-toggle').style.display = 'none';
}
I understand

Related

jQuery hide dropdown menu

I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});

Showing dropdown list when I clicked on

<script>
$(document).ready(function({$("#more").click(function()$(".dropdown").fadeToggle("slow")});});
</script>
This is my script for more option. I want to show the dropdown list when I clicked and hide it when I clicked again. Whit this code, all I can get is hiding when I clicked and showing when I clicked again. I want to make it reverse.
How can I change the default display?
Your code works, it just has some typo's.
And to define the default state, change the display property of .dropdown to none
$(document).ready(function() {
$("#more").click( function() {
$(".dropdown").fadeToggle("slow")
});
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="more">click for more</div>
<div class="dropdown">Droppie down</div>
you can use CSS display:none property to hide the div on page load.
eg:
#more{
display:none;
}
$("#more" ).on('click', function() {
$( ".dropdown" ).fadeToggle( "slow", "linear" );
});

Adding Class to Id's using Jquery

When I press a button, my table is suppose to be replaced by a video but when I click the button, my table disappears and my video won't show up. Is there something wrong with my code?
<script>
var checkContent = 0;
function contentChange(){
if(checkContent == 0){
$('#tableContent').addClass("hiddenContent");
$('#videoContent').removeClass("hiddenContent");
checkContent++;
}else{
$('#tableContent').removeClass("hiddenContent");
$('#videoContent').addClass("hiddenContent");
checkContent--;
}
}
</script>
Something like this?
HTML:
<button>Click</button>
<table id="tableContent"><tr><td>Table Content</td></tr></table>
<div id="videoContent" class="hiddenContent">Video Content</div>
JavaScript:
$( "button" ).click(function() {
$( '#tableContent' ).toggleClass( "hiddenContent" );
$( '#videoContent' ).toggleClass( "visiblecontent" );
});
CSS:
.hiddenContent{ display:none;}
.visiblecontent{ display: block; }
Fiddle here.
Simple, but I don't know it is good for you.
HTML:
<input type="button" id="btn" value="Click Me"></input>
<div id="someContent" hidden>Some Content</div>
<div id="videoContent">Video Content</div>
JS:
document.getElementById("btn").onclick = function(){
var someContent = document.getElementById("someContent");
var videoContent = document.getElementById("videoContent");
if(someContent.hasAttribute("hidden")){
someContent.removeAttribute("hidden");
videoContent.setAttribute("hidden", "");
}
else{
videoContent.removeAttribute("hidden");
someContent.setAttribute("hidden", "");
}
}
Try this if any good for you:
http://jsfiddle.net/bigneo/40vLxLnm/
You may want to check the console in the browser (CTRL + SHIFT + J).
Also remove the
`enter code here`
if you didn't put it there on purpose.
If that still doesn't work you probably have an error in either your CSS or your HTML code.

Toggle div on link click

http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>

jQuery issue with drop down menu

Problems are:
The drop down menu(#sub-button) is closing by mouse click, it should close only when click on visible #button
When for example I try to open second drop down menu(#sub-button2) the first drop down menu should close immediately when click on #button2
Html code:
<html>
<head>
<title>jquery ddm</title>
<style type="text/css">
#button {
position:fixed;
width:150px;
height:40px;
background-color:blue;
}
#sub-button {
display: none;
width:150px;
height:30px;
margin-top:41px;
background-color:cyan;
}
#button2 {
position:fixed;
width:150px;
height:40px;
background-color:orange;
}
#sub-button2 {
display: none;
width:150px;
height:30px;
margin-top:41px;
background-color:aqua;
}
</style>
</head>
<body>
<div id="button">
<div id="sub-button">6</div>
</div>
<div style="clear:both"></div>
<div id="button2" style="margin-left:152px;">
<div id="sub-button2">66</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
and the js code (toggle.js):
var myTimeout;
// show/hide sub-button menu
$( "#button" ).click(function() {
$( "#sub-button" ).toggle();
});
// if mouse out of button and sub-button divs - close sub-button after 860ms
$( "#button" ).mouseout(function() {
myTimeout = setTimeout( "jQuery('#sub-button').hide();",860 );
});
// if timer that are about to close sub-button is launched, stop it
// by hover button or sub-button divs
$( "#button" ).mouseover(function() {
clearTimeout(myTimeout);
});
var myTimeout2;
$( "#button2" ).click(function() {
$( "#sub-button2" ).toggle();
});
$( "#button2" ).mouseout(function() {
myTimeout2 = setTimeout( "jQuery('#sub-button2').hide();",860 );
});
$( "#button2" ).mouseover(function() {
clearTimeout(myTimeout2);
});
The first issue is that the submenu is a child of the #button, so the click event will bubble up to the parent and the code for the #button click event will get called.
The first issue you can solve by testing for the original clicked target:
$( "#button" ).click(function(e) {
if(e.target.id === 'button'){
$( "#sub-button" ).toggle();
}
});
The second issue is that no where in your code are you closing the first button on click of the second button and visa versa
you could add:
$("#button").click(function (e) {
if (e.target.id === 'button') {
$("#sub-button2").hide();
$("#sub-button").toggle();
}
});
Although if you are going to have more buttons later on, this JS can and should be tidied up and made more efficient, otherwise you risk the code becoming hard to maintain.
here is the FIDDLE
just change your js like this:
var myTimeout;
// show/hide sub-button menu
$( "#button" ).click(function() {
$("#sub-button2").hide();
if (!$("#sub-button2").is(":visible")) $( "#sub-button" ).show();
});
// if mouse out of button and sub-button divs - close sub-button after 860ms
$( "#button" ).mouseout(function() {
myTimeout = setTimeout( "jQuery('#sub-button').hide();",860 );
});
// if timer that are about to close sub-button is launched, stop it
// by hover button or sub-button divs
$( "#button" ).mouseover(function() {
clearTimeout(myTimeout);
});
var myTimeout2;
$( "#button2" ).click(function() {
if (!$("#sub-button2").is(":visible")) $( "#sub-button2" ).show();
$("#sub-button").hide();
});
$( "#button2" ).mouseout(function() {
myTimeout2 = setTimeout( "jQuery('#sub-button2').hide();",860 );
});
$( "#button2" ).mouseover(function() {
clearTimeout(myTimeout2);
});
If I understand you properly, you want to prevent the event bubble to the parent, and if you click a menu, hide the other menus child. No need to do a bunch of "checking", just handle the events properly. Note where I comment "ADD" below
Rush to the example in action: http://jsfiddle.net/gP4CV/
var myTimeout;
// show/hide sub-button menu
$("#button").click(function () {
$("#sub-button").toggle();
$("#sub-button2").hide();// ADD hide other child
});
// ADD prevent event bubble to parent
$("#sub-button, #sub-button2").click(function (e) {
e.stopPropagation();
});
// if mouse out of button and sub-button divs - close sub-button after 860ms
$("#button").mouseout(function () {
myTimeout = setTimeout("jQuery('#sub-button').hide();", 860);
});
// if timer that are about to close sub-button is launched, stop it
// by hover button or sub-button divs
$("#button").mouseover(function () {
clearTimeout(myTimeout);
});
var myTimeout2;
$("#button2").click(function () {
$("#sub-button2").toggle();
$("#sub-button").hide(); // ADD hide other child
});
$("#button2").mouseout(function () {
myTimeout2 = setTimeout("jQuery('#sub-button2').hide();", 860);
});
$("#button2").mouseover(function () {
clearTimeout(myTimeout2);
});

Categories

Resources