jquery .show() not displaying correctly

Question

So basically I want to do an event that if a tab is clicked on, two button groups disappear (.hide()) and when the other tab is clicked on, these two button groups reappear (.show()). So, no problem with .hide(). Initially, the two groups are displayed: inline-block, and it's just fine. But when they reappear, they aren't on the same line.

![initially]: https://i.stack.imgur.com/SsoOi.png ![after]: https://i.stack.imgur.com/vhmQZ.png

Here's my html, css and jQuery

HTML:

<div class="row" id="selection">
    <div class="col-lg-6">
        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li class="active"><a href="#mod" data-toggle="tab"> module et orientation </a></li>
            <li><a href="#com" data-toggle="tab"> composantes </a></li>
        </ul>
...

<div class="mode-selector">
  <span class="mode">Mode: </span>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" id="rad"> 
      <input type="radio" name="inlineRadioOptions" value="rad"> Radians 
    </label>
    <label class="btn btn-default" id="deg"> 
      <input type="radio" name="inlineRadioOptions" value="deg"> Degrés 
    </label>
  </div>  
</div>
<div class="mode-selector pull-right">
  <span class="mode">Format de la réponse: </span>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default" id="polaire"> 
      <input type="radio" name="inlineRadioOptions" value="rad"> Polaire 
    </label>
    <label class="btn btn-default" id="composantes"> 
      <input type="radio" name="inlineRadioOptions" value="deg"> Composantes 
    </label>
  </div>  
</div>

CSS:

.mode-selector{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 10px;
    display: inline-block;
}

jQuery:

$('#selection ul li:eq(1)').click (function() {
    $('.mode-selector').hide(); 
});

$('#selection ul li:eq(0)').on('click', function() {
    $('.mode-selector').show();
});

You might want to look at this question which says to use `.css` instead: http://stackoverflow.com/questions/9260009/jquery-show-function-display-inline-block-how — Stryner, Sep 11 '14 at 21:46
Yeah, I tried the .css display method before (with inline-block) and it didn't work, so I tried the .hide and .show methods. — jonathanGB, Sep 11 '14 at 21:58
There are no `li`s in your HTML code. Can you paste the relevant HTML? — elzi, Sep 11 '14 at 21:58

score 0 · Accepted Answer · answered Sep 11 '14 at 22:42

0

Seems like the pull-right class in the second button group caused this trouble. I removed it and the transition is flawless. Thanks everyone!

answered Sep 11 '14 at 22:42

jonathanGB

1,500
2
16
28

jquery .show() not displaying correctly

1 Answers1