CODEWITHSUNDEEP
javascriptjquery
user_v12
user_v12

Reputation: 589

Why when hide a div it's space exist there

I want to hide a div when clicking a button. div hides well when clicking the button. But when div hides space still exists there.

It means there are two div(It can be more than two). I want to hide the div and space also and below div replace with hiding one.

I have mentioned my tried in jsfiddle: https://jsfiddle.net/c2pnv7o6/17/

How can I fix this?

Upvotes: 1

Views: 55

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The first div is hidden when the button is clicked. The reason the second div does not move all the way to the top is because you have three <br /> tags in the way. Remove them. Alternatively use margin-bottom on the div elements to provide the spacing, then when one is removed the white space is removed too.

In addition you should not use inline CSS or JS. Move that logic in to external stylesheet and script files. You should also look to amend the JS logic to use unobtrusive event handlers.

With all that said, try this:

jQuery($ => {
  $('.test-btn').on('click', e => $(e.target).closest('.parent').hide());
});
h6.modal-title {
  margin: 5px;
}

p {
  border: 1px;
  border-style: solid;
  border-color: green;
  padding: 0.5em;
  width: 15%;
  text-align: center;
  margin: 5px;
  display: inline-block;
}

.btn {
  float: right;
}

#prodcuctdiv,
#prodcuctCon {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <div id="prodcuctdiv" class="parent">
    <h6 class="modal-title">New Products</h6>
    <div>
      <p>sss</p>
      <p>jjj</p>
    </div>
    <div>
      <button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
    </div>
  </div>

  <div id="prodcuctCon" class="parent">
    <h6 class="modal-title">New Con</h6>
    <div>
      <p>mmm</p>
    </div>
    <div>
      <button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me2</button>
    </div>
  </div>
</div>

Upvotes: 1

TheWoozyDude
TheWoozyDude

Reputation: 46

I would say your problem is that you use those three <br> Tags. Those are not part of the div you are hiding. By hiding the ancor changes.

 <br><br><br>

Try putting them in the div you hide, or use margin properties.

Upvotes: 2

Valentin
Valentin

Reputation: 154

You are not removing the line breaks. Add them in the div element

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
  <div id="prodcuctdiv">
    <h6 style="margin: 5px;" class="modal-title">New Products</h6>
    <div>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
    </div>
    <div>
      <button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
    </div>
    <br><br><br> 
  </div>

Upvotes: 1

Related Questions