Trying to hide a button without affecting the spacing between buttons.
$(document).ready(function(){
$('#hide').click(function(){$('#btn').css('display','none');});
$('#show').click(function(){$('#btn').css('display','block');});
}
Explored using the display CSS property, but it doesn't seem to be working as expected (or maybe I'm misunderstanding the .css() function).
Check out the JS Fiddle Here
To toggle visibility using jQuery, simply utilize the hide and show methods:
Check out this example on jsFiddle
$(function(){
$('#hide').click(function(){$('#btn').hide();});
$('#show').click(function(){$('#btn').show();});
});
When you call hide(), it applies display: none;, while show() applies display: inline-block;
Quick Tips:
$(function(){YOUR CODE HERE}); syntax is a convenient alternative to $(document).ready(function(){...});); at the endIf you prefer using visibility to maintain space without collapsing, rectify the syntax error like this:
View the updated jsFiddle demo here
$(function(){
$('#hide').click(function(){$('#btn').css('visibility','hidden');});
$('#show').click(function(){$('#btn').css('visibility','visible');});
});
Your JavaScript code contains an error and you forgot to reference jQuery.
$(document).ready(function(){
$('#hide').click(function(){$('#btn').css('visibility','hidden');});
$('#show').click(function(){$('#btn').css('visibility','visible');});
});
Have you considered using:
$( ".target" ).hide();
Ensure that you include jQuery in the fiddle along with fixing a minor syntax error.
$(document).ready(function(){
$('#hide').click(function(){
$('#btn').css('visibility','hidden');
});
$('#show').click(function(){
$('#btn').css('visibility','visible');
});
})
Feel free to take a look at the fiddle provided below
http://jsfiddle.net/uyoezedy/6/
You may want to experiment with the following 4 elements:
Take a look at the code snippet below:
$(document).ready(function(){
$('#hide').click(function(){$('#btn').css('display','none');});
$('#show').click(function(){$('#btn').css('display','block');});
});
$(document).ready(function(){
$('#hide').click(function(){$('#btn').css('opacity','0');});
$('#show').click(function(){$('#btn').css('opacity','1');});
});
$(document).ready(function(){
$('#hide').click(function(){$('#btn').css('background','transparent');});
$('#show').click(function(){$('#btn').css('background','inherit');});
});
$(document).ready(function(){
$('#hide').click(function(){$('#btn').hide();});
$('#show').click(function(){$('#btn').show();});
});
I hope this information proves useful to you!
After creating a new log in / register template using CSS3 and HTML, I now have a more visually appealing form compared to the basic one I had before. To achieve this look, I referenced the following tutorial: http://www.script-tutorials.com/css 3-modal-po ...
Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling. I have figured out how to keep it visible at ...
After thorough revision, the question now reads as follows: Take a look at this content in database.csv: barcode,ScQty, Name , Qty ,Code 123456 , 3 ,Rothmans Blue , 40 ,RB44 234567 , 2 ,Rothmans Red , 40 ,RB30 345678 , 2 ,Rothmans Gre ...
Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...
How can I pass an array in MVC to store data in SQL Server? I am trying to save the score of each question using Ajax and jQuery, but it only saves one piece of data from the list array. The array variable is result that needs to be assigned to eachscore. ...
Currently, I am working on creating a report editor that displays only one toolbar when multiple summernote WYSIWYG editor sections are used. My solution involves having the first section as a full editor and the other section in airmode. Below is the HTM ...
Hey there! I have a question about my website's home page. I want to create 4 carousels using the .get method when the page loads. I'm curious about how I can call a JavaScript function after each carousel has been successfully loaded. The number ...
We have made the decision to streamline our site by utilizing only GRID and NAVBAR on the vast majority of pages. This eliminates the need to load unnecessary jQuery and bootstrap.min.js on every page. The only JavaScript required is for the NAVBAR functi ...
I am currently working on retrieving a result set using postcodes with jQuery autocomplete. However, the code I have implemented seems to be displaying an empty set of rows. <html lang="en"> <head> <meta charset="utf-8> <title>Ausp ...
After encountering a larger issue, I found that I could reduce it to a simpler scenario: To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/ Here is the simplified HTML code: <div class="box"> <img class=" ...
.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...
I have a question regarding the Material UI drawer. In my project, I am trying to change the background color of the main tag. However, the main tag's height is restricted to the content inside. Check out this link for reference Setting the height t ...
Hey there, I'm currently trying to incorporate a responsive side menu into my website using either JQuery or CSS3. What I need is a side menu that will smoothly shift the page content when a link is clicked, and also adds a close button (X) to the men ...
I can't figure out why my Vimeo videos are not appearing in a Shadowbox. I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations ...
Having trouble passing a variable into an inline onclick function. I've tried researching and following suggestions from this link, but encountered errors (Uncaught SyntaxError: missing ) after argument list): pass string parameter in an onclick func ...
I have been working with a Jquery Mobile page and I am facing an issue when loading a form via AJAX. The plugin I am using to set the page dimensions calculates them after the AJAX call has completed and the layout has been updated. However, the height of ...
Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...
One issue I have encountered is that many Django admin plugins come with their own version of jQuery, which can cause conflicts when trying to use them together. For example, I've run into this problem with django-markitup and django-sortable. Is th ...
As a beginner in AJAX, I have some understanding of it. However, I am facing an issue on how to refresh the page when a new order (order_id, order_date, and order_time) is placed. I came across some code on YouTube that I tried implementing, but I'm n ...
I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...