CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Waeez
Waeez

Reputation: 339

override jquery hide() using inline css

HTML

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

Javascript

$(".dep-adm-inp").hide();

the div is hidden when page loads but if the php variable is not empty then i want to show the div when.

Upvotes: 0

Views: 183

Answers (2)

Ananth Pai
Ananth Pai

Reputation: 1969

set the class variable dep-adm-inp as hidden by default in css. If the variable $adm_f is not empty, set style='display:block;'. With this logic you don't need to call the statement $(".dep-adm-inp").hide(); in your javascript. This way the div will be shown only if the variable $adm_f is not empty.

Upvotes: 2

fen1x
fen1x

Reputation: 5870

.hide() method sets display:none; on your element. You can override it by setting display: block!important; (or whatever your display property is) in CSS:

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

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


/* This makes .item visible even after .hide() */

.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>

Upvotes: 1

Related Questions