is it possible to make this show/hide script work with multiple hide buttons or something similar? id="cv_cont should stay visible by default.
HTML
<button id="show_cv">Show</button>
<button id="hide_cv">Hide 1</button>
<button id="hide_cv">Hide 2</button>
<button id="hide_cv">Hide 3</button>
<button id="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
JavaScript
$("#hide_cv").click(function() {
$("#cv_cont").hide();
});
$("#show_cv").click(function() {
$("#cv_cont").show();
});
Original Location of the script.
jQuery - failed show/hide buttons
The first problem here is all the hide buttons have the same ID's value, you can fix that by give them the same class's value and call it on the JavaScript code.
The correct code will like this :
<!DOCTYPE html>
<html lang="fr">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<button class="show_cv">Show</button>
<button class="hide_cv">Hide 1</button>
<button class="hide_cv">Hide 2</button>
<button class="hide_cv">Hide 3</button>
<button class="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
<script>
$(".hide_cv").click(function() {
$("#cv_cont").hide();
});
$(".show_cv").click(function() {
$("#cv_cont").show();
});
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is code in custom.js
$(':button').on('click',function(){
alert('Hello');
});
and when I changed the code in custom.js to
$('button').on('click',function(){
alert('Hello');
});
They do the same work that is display alert on click,But I want to know the difference between 'button' and ':button'
Using only button will select only <button></button> elements, while :button will select <button></button> and <input type="button" />
See https://api.jquery.com/button-selector/ for more information.
button only selects the button elements, whereas :button also selects the input type="button"
$(':button') selects <button> tags or <input /> tags with type="button"
$('button') selects only <button> tags
$(':button').on('click',function(){
alert('You clicked a tag of type: ' + $(this).prop('tagName'));
});
$('button').on('click',function(){
alert('Hello from ' + ($(this).html() || $(this).val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>
<input type="button" value="Input Button" />
$(":button") : selects both "button" tag and "input type=button" as well
while $("button") : only selects
For some reason .hide works, but .show not?
This is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button onclick="alertShowAccount()">Add account</button>
<script>
function alertHideAccount() {
$("#addAccount").hide();
}
function alertShowAccount() {
$("#addAccount").show();
}
</script>
<div style="display:none" id="addAccount">
<button class="btn btn-md" onclick="alertHideAccount()">Cancel</button>
</div>
<body>
Anyone has an idea why it is not working? The function IS being called, I tested it with an alert. Also the console gives no errors.
Here's how I did man, it worked for me this way...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#addAccount').hide();
$('#hide_div').on('click',function(){
$("#addAccount").hide();
});
$('#show_div').on('click',function(){
$("#addAccount").show();
});
});
</script>
<body>
<button id="show_div">Add account</button>
<div id="addAccount">
<button class="btn btn-md" id='hide_div'>Cancel</button>
</div>
<body>
So here's what happened, we changed Onclick to just the ID of the element, and called it on the script with $(elem).on('event',function());
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
When I press my button check in bootstrap modal, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect.
this is link Plunker
<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example1.js"></script>
</head>
<body>
<div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<input type="text" ng-model="new" /><button ng-click="check()" >check</button>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
Since your modal is set to have its own controller, and therefore its own scope,
when you execute the function 'check' it tries to alert $scope.new,
$scope.new isn't set on the modal scope.
one way to overcome this is to pass the new variable into the function, and let the function alert the passed value.
here's a fixed plunkr
when calling check(), pass in the new variable:
<button ng-click="check(new)">check</button>
and in your controller change check function:
$scope.check = function(text) {
alert(text);
};
Alright, I want to edit this code so if I for example press button 1 it first shows an image and then if I press button 1 again it should hide the image. Same goes for all buttons. I wonder if someone can rewrite my script so that becomes possible.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
window.show = function(elementId) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; i++)
elements[i].className = "hidden";
document.getElementById(elementId).className = "";
}
}//]]>
</script>
</head>
<body>
<button type="button" onclick="show('id1');" >Button 1</button>
<button type="button" onclick="show('id2');" >Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>
<button type="button" onclick="show('id4');">Button 4</button>
<div id="id1" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id2" class="hidden"><img src="alfagel.gif" height="280" width="120"/></div>
<div id="id3" class="hidden"><img src="bjorktrast.gif" height="280" width="120"/></div>
<div id="id4" class="hidden">text 4</div>
</body>
</html>
Import jQuery
Use $.fn.toggleClass
$('div').toggleClass('hidden');
Full example: http://jsfiddle.net/sLLL7/
jQuery has a hide and show method that should work. Example:
$('id1').hide()
The quickest way to do this would be to use jQuery and look into it's toggle() function. Otherwise..perhaps store the states of the buttons as boo leans and hide/show conditionally based on the value.