Sol Sol - 3 months ago 5
HTML Question

How can I make the text stop moving when one DIV opens?

Here's what I'm talking about: https://jsfiddle.net/npbfop3w/

HTML

<div id="ta35">

<!-- tab -->
<div>
<div class="ta351">+</div>
<div class="ta352">
<div class="ta354">title</div>
<div class="ta353">
content
</div>
</div>
</div>
<!-- end -->

<!-- tab -->
<div>
<div class="ta351">+</div>
<div class="ta352">
<div class="ta354">title</div>
<div class="ta353">
content
</div>
</div>
</div>
<!-- end -->

</div>


CSS

#ta35{
position:fixed;
top:20px;
left:20px
}

.ta351{
text-align:center;
line-height:20px;
display:block;
margin-top:10px;
height:20px;
width:20px;
background: white;
border:1px solid #eee;
transition: ease 0.5s all;
-o-transition: ease 0.5s all;
-moz-transition: ease 0.5s all;
-webkit-transition: ease 0.5s all
}
.ta351:hover{
background:#ffb8cc
}
.ta351.active{
background:#ffb8cc;
}

.ta352:not(.active){
display:none
}
.ta352{
position: relative;
float: right;
margin-left:30px;
top: -22px;
background: white;
border: 1px solid #eee;
width:150px;
text-align: justify;
font-family: karla;
font-size: 10px;
letter-spacing: 0px;
color: #444
}

.ta353{
padding:7px
}

.ta354{
border-bottom: 1px solid #eee;
padding: 5px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold
}

#ta35 .cr00{
text-align: right;
padding: 0 7px 5px 0
}


SCRIPT

$(document).ready(function(){
$(".ta351").click(function(){
if($(this).hasClass('active')){ $(this).removeClass('active');
$(this).siblings('.ta352').slideUp(450);
}else{
$(this).addClass('active');
$(this).siblings('.ta352').slideDown(500);
$(this).parents().siblings().children('.ta352').slideUp(450);
$(this).parents().siblings().children('.ta351').removeClass('active');
}
});// thank you to scimonster @ stackoverflow for the help
});


My problem is that whenever I open the first tab, the
+
symbol on the second one moves down and I want it to stay still. I've tried using
inline-block
on
.ta351
but doing so makes the second tab's box have a weird jump effect or something: https://jsfiddle.net/5evusmgc/



So how can I make the
+
symbol stay in place and avoid that jumpy effect? Thank you so much for all the help.

Answer

Another option:

Clear the float and now the UI works fine I guess (both the + and background moving together)

$(document).ready(function() {
  $(".ta351").click(function() {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).siblings('.ta352').slideUp(450);
    } else {
      $(this).addClass('active');
      $(this).siblings('.ta352').slideDown(500);
      $(this).parents().siblings().children('.ta352').slideUp(450);
      $(this).parents().siblings().children('.ta351').removeClass('active');
    }
  }); // thank you to scimonster @ stackoverflow for the help
});
#ta35 {
  position: fixed;
  top: 20px;
  left: 20px
}

.ta351 {
  text-align: center;
  line-height: 20px;
  display: block;
  margin-top: 10px;
  height: 20px;
  width: 20px;
  background: white;
  border: 1px solid #eee;
  transition: ease 0.5s all;
  -o-transition: ease 0.5s all;
  -moz-transition: ease 0.5s all;
  -webkit-transition: ease 0.5s all
}

.ta351:hover {
  background: #ffb8cc
}

.ta351.active {
  background: #ffb8cc;
}

.ta352:not(.active) {
  display: none
}

.ta352 {
  position: relative;
  float: right;
  margin-left: 30px;
  top: -22px;
  background: white;
  border: 1px solid #eee;
  width: 150px;
  text-align: justify;
  font-family: karla;
  font-size: 10px;
  letter-spacing: 0px;
  color: #444
}

.ta353 {
  padding: 7px
}

.ta354 {
  border-bottom: 1px solid #eee;
  padding: 5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold
}

#ta35 .cr00 {
  text-align: right;
  padding: 0 7px 5px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ta35">

  <!-- tab -->
  <div>
    <div class="ta351">+</div>
    <div class="ta352">
      <div class="ta354">title</div>
      <div class="ta353">
        content
      </div>
    </div>
    <div style="clear:both;"></div>
  </div>
  <!-- end -->

  <!-- tab -->
  <div>
    <div class="ta351">+</div>
    <div class="ta352">
      <div class="ta354">title</div>
      <div class="ta353">
        content
      </div>
    </div>
    <div style="clear:both;"></div>
  </div>
  <!-- end -->

</div>

Comments