Create a custom CSS style to replace the default jQuery hide() function

HTML

<div class="adm-input" <?php if(!empty($admin_fee) || $admin_fee != "") echo "style='display:block'"; ?> id="fees-input">
    <label>Admission Fees(<i class="fa fa-inr"></i>)</label>
    <div class="input-group">
        <span class="input-addon remove-input"><i class="fa fa-close"></i></span>
        <input type="text" class="form-control expected-value" value="<?php if(!empty($admin_fee)) echo $admin_fee; ?>" placeholder="Amount Expected">
        <input type="text" class="form-control paid-amount" value="<?php if(!empty($admin_fee)) echo $admin_fee; ?>" placeholder="Paid Amount">
    </div>
</div>

Javascript

$(".adm-input").hide();

The div is initially hidden when the page loads, but it will show if the PHP variable is not empty.

javascriptjqueryhtmlcss

Answer №1

In your CSS, ensure that the class variable dep-adm-inp is set as hidden by default. If the variable $adm_f is not empty, apply style='display:block;'. By implementing this logic, there is no need to execute $(".dep-adm-inp").hide(); in your JavaScript code. This approach ensures that the div will only be visible when the variable $adm_f contains a value.

Answer №2

.hide() function applies display:none; to the specified element. You can counteract this by adding display: block!important; (or your desired display property) in your CSS:

setTimeout(() => {
  $('.item').hide();
}, 2000);
.container {
  display: flex;
}

.item {
  width: 200px;
  height: 100px;
  background-color: darkgoldenrod;
  margin: 10px;
}


/* This overrides .hide() and keeps .item visible */

.item-visible {
  display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item item-visible">Will be visible</div>
  <div class="item">Will be hidden</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

BorderWoocommerce

Something odd has appeared around my shopping cart total ("WARENKORB SUMME") today. Could you please take a look at the screenshot below? Any idea how to remove it? This is for a Wordpress/WooCommerce store. I haven't made any recent changes - I su ...

csswordpresswoocommerce

Tips for creating a substitute for a standard prototype in JavaScript

Having trouble with a JavaScript interpreter that has a buggy Array.prototype.sort. I want to replace it, at least for testing purposes. I have a function called mySort(array, comparator), but how can I make it work like array.sort(comparator)? I also ne ...

javascriptarrayssortingprototype

Loop through multiple levels of elements using jQuery

I have a snippet of HTML that resembles the following structure: <div class="block"> <div id="item1"></div> <div id="item2"></div> </div> <div class="block"> <div id="item3"></div> </di ...

jqueryhtmlloopsforeach

Error message: Unauthorized request error with the change.org JavaScript API

I am currently working on integrating the javascript API from change.org in order to retrieve all of my signed petitions for display on my source forge page. However, I am encountering an unauthorized request response from the change.org API. Despite tryi ...

javascriptjson

Design a layout featuring an array of boxes in varied sizes

Is it possible to create a grid layout with 3 columns containing div boxes of varying heights, all populated with content extracted from a database? ...

htmlcss

Refresh the angular form after submitting data

I am currently working on an angular form to input data into a database. My framework of choice is angular-fullstack by yeoman. After successfully submitting the data, I encounter an issue where clearing the form values doesn't allow me to add new en ...

javascriptangularjsnode.js

Control Over Fluid Grid Layouts

Apologies for reaching out, as I usually try to figure things out on my own. However, after spending hours reading through countless pages with no success, I am at my wit's end. I'm struggling to create a 4-column 'home' landing page f ...

csswordpressresponsive-designfluid-layout

Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom. While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps ...

htmlcssflexbox

Is there a way to create a comprehensive list of all the possible winning combinations in a game of 4-Dimensional Connect Four?

Currently, I am developing a 4D Connect Four game using Javascript. The game can be accessed here. My next goal is to incorporate win-checking functionality. To simplify the process and save time, my plan is to pre-create a comprehensive list of all poten ...

javascriptalgorithm

Event doesn't trigger when custom function is called within $(document).ready();

Here is the code snippet I am currently working with: $(document).ready(function () { VerifyCustomerFilter(); $("#ToDateStor").on("DateSet", function () { ... ); function VerifyCustomerFilter() { if(toDate != "") ...

jquerycustom-eventsjquery-triggerjquery-triggerhandler

Updating a boolean value from true to false within a Vue component while making an Axios API request

My Vue.js and Axios setup involves making an API call, where I aim to temporarily change the value of a variable from false to true using SetTimeout. However, there seems to be an issue with Vue not responding unless the variable name is hard coded. Withi ...

javascriptvue.jsaxios

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

javascriptjqueryhtml

Attempting to crack the code within body-parser and Node.js

I am just getting started with Node.js & Express and trying to follow a tutorial at https://github.com/jw84/messenger-bot-tutorial. I have a good understanding of most parts, but I'm confused about the use of "entry" and "messaging" in this code snipp ...

javascriptnode.jsexpress

Why is AJAX returning false and I'm unable to figure out the reason?

My goal is to perform a database query for a keyword instantly upon input change. Currently, I am able to successfully execute the query and store all the results. However, when attempting to display the results using GET, my ajax function returns false. W ...

phpjavascriptajax

Issue with Table Content Being Truncated After Conversion from HTML to MS Word 2003

I am experiencing an issue where the table content is being cut off on the right side of the page when converting from an HTML page into MS Word 2003. Below is a sample HTML code (where placeholder $CLOB_DATA will be replaced by large CLOB data): <html ...

htmlcssms-wordhtml-table

How can we display data from the database in a table if the data is stored as a string separated by commas using Ajax?

I am having trouble displaying 33 and 123 of heading 1 and heading 2 in a new row. Can someone please help me with this issue? Even though I updated the code, the for loop is only showing the last value. $.ajax({ type:"POST", url:"{{route(&ap ...

javascriptphpjqueryajaxlaravel

Launching a new popup window using jqModal

I need help with a jqModal popup window scenario. I have one main popup window that I want to close after clicking OK, and then open another popup window. How can I achieve this? The issue I am facing is that the click event is not triggering as expected. ...

jquerypopup

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Is there a way to enhance the saving process for users visiting an HTML page, rather than requiring them to go through File > Save As? I am interested in implementing a "Save Page As" button on the page that would trigger the save as dialog when clicke ...

javascriptjqueryhtml

retrieving the value of a field within an array

Here is my code snippet: <div class="label">{{ item.data[0] }}</div> and in the view, this is what I have: { "id": 6, "firtname": "JHON ", "lastname": "SCALA", "fullname& ...

javascriptvue.js

Having trouble inputting text into the text area using Selenium WebDriver with C#

Here is the original code snippet: I am having trouble entering text in the text box below. Can you please help me figure out how to enter text in this text box? <td id="ctl00_cRight_ucSMS_redSMSBodyCenter" class="reContentCell" ...

javascriptc#seleniumselenium-webdrivercss-selectors