How can I hide one div and show another upon click action?
<div class="container">
<div class="row">
<input class="abc" type="text" />
</div>
</div>
<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>
.newone{ position:absolute; left:0; right:0; top:0px; display:none;}
this should function properly
$(function() {
$(".abc").on("focusin", function() {
$(".newone").fadeIn();
}).on("focusout", function () {
$(".newone").fadeOut();
});
});
To utilize the focus and focusout events of an input element for displaying or hiding a related message dynamically with javascript, follow this example:
var input = document.getElementById('myinput');
var message = document.getElementsByClassName('newone')[0];
input.addEventListener('focus', function() {
message.style.display = 'block';
});
input.addEventListener('focusout', function() {
message.style.display = 'none';
});.newone {
display:none;
}<div class="container">
<div class="row>
<input class="abc" type="text" id='myinput'/>
</div><div class="container">
<div class="row">
<span>some text here</span>
<span>some text here</span>
</div>
</div>
<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>To conceal the division with jQuery, you can utilize the addClass method. Take a look at the example code below:
$( ".container" ).addClass( "hidden" );
For further information, please visit the following URL:
I'm a newcomer to the world of Moodle, currently using version 2.9. I've created a unique design for my Signup page using HTML5 and CSS. How do I go about integrating this custom page? While I understand how to change the default Login page by m ...
I'm having an issue with my form where the ajax method seems to be executing twice when I click on the submit button. Can anyone help me troubleshoot this problem? $("form#dealForm").submit(function(event){ //disable the default form submission ...
I transferred a tab bar from one of my projects to jsfiddle, but the CSS was too complex to understand. So, I extracted useful code from the CSS and created my own version in this new fiddle. However, it looks exactly like the example. Now, I need to imple ...
My Angular App is wrapped by electron and utilizes node.js to fetch MySQL data for AngularJs via electron. However, since there is no fixed database in my project, I have to dynamically change the database credentials from the client side, making sure it p ...
I am interested in creating my own class that extends an HTML element class such as HTMLDivElement or HTMLImageElement. Following the standard inheritance pattern: // Class A: function ClassA(foo) { this.foo = foo; } ClassA.prototype.toString = fun ...
I am struggling with linking my HTML pages together. Despite anchoring the links, when I click on them in HTML format, it gives me a file not found error. I have three pages that need to be interconnected. Before testing it out, I place them all in one fo ...
Currently, I am working with Asp.Net MVC and SQL server. My goal is to update the HTML content dynamically with new data from the database without having to reload the entire page. What would be the most efficient approach to achieve this? @foreach (var ...
Everything seems to be working well in Chrome and IE 9 compatibility mode, but not in the actual IE 9 mode. The goal is to have the page centered. Check out the site here Any ideas on what could be causing this issue? ...
After implementing an Infinite scrolling table using react-window and material UI, I have encountered some issues that need to be addressed: The header does not stick to the top despite having the appropriate styles applied (stickyHeader prop). The header ...
I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...
I am utilizing Bootstrap 5.3.0 and have included it through CDN links in my JS script. This is how I am injecting it using my js file within the existing website's DOM via a chrome extension named Scripty, which serves as a JS injector extension for c ...
After upgrading from Angular 2 to Angular 4, I noticed that the Renderer is now deprecated and we should use Renderer2 according to the documentation. I have been trying to figure out how to call the focus() method with the new Renderer source, but I can& ...
I recently incorporated the amazing Theatre.js library to add animations to a section of my website. Now I realize I need to include some animation at the beginning as well. However, when attempting to select and move all the keyframes using the studio U ...
I have this specific code snippet within my index.php file: $(document).ready(function(){ $("#searchInput").autocomplete({ source: "getResults.php" }); Furthermore, the getResults.php script is as follows: <?php $result = array(); array_push($result, ...
The following code was created by me in order to refresh or reload the content within the div id='bitcoin_blocks_table', which only occurs when a user is actively on the website. I noticed that if no one is on the site and I return after 2 hours ...
Although I have experience styling logic with Ruby and Java, I am relatively new to front end development and JavaScript. I am encountering an issue where divs and spans are either undefined or null when I try to access them using methods like getElementBy ...
In my current scenario, I am faced with a challenge involving a directive that has an isolated scope. My goal is to invoke a function from the parent's scope with a combination of arguments. By "mixed" arguments, I mean one argument originates from th ...
I'm currently utilizing the react-native-draggable-flatlist within my application and I am struggling to figure out how to properly pass a prop value to renderItem in order to implement conditional styling changes. The current issue is that the prop v ...
I have a button on my page. When a user clicks the button, it triggers the following code: as.controller('CustSummary', function($scope, $rootScope, $http, $routeParams, $location) { var loadAbbDetails = function() { ...
Attempting to obtain a link for checkout on an e-commerce site, I attempted to click on the span that triggers a JavaScript function: <a id="checkout-btn" class="btn btn-lg btn-success pull-right" href="javascript:shop.orders.save()" rel="nofollow"> ...