override jquery hide() using inline css

Question

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.

You can set the !important to your style to override. Try with this style='display:block !important;' — Thangadurai
– Thangadurai, Commented Mar 18, 2018 at 5:33
Unfortunately, style='display:block !important;' inline style will be overwritten by hide(). The style with the important property must be declared on a stylesheet (whether in a separate file or, possibly generated dynamically on the same page). — Kasparas Anusauskas
– Kasparas Anusauskas, Commented Mar 18, 2018 at 5:39

Ananth Pai · Accepted Answer · 2018-03-18 06:01:44Z

2

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.

edited Mar 18, 2018 at 6:01

answered Mar 18, 2018 at 5:56

Ananth Pai

1,9891 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fen1x · Accepted Answer · 2018-03-18 05:40:58Z

1

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

answered Mar 18, 2018 at 5:40

fen1x

5,8986 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

override jquery hide() using inline css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related