How to make a JS horizontal content slide from px to % responsive

Question

This is driving me mad: I have a small bit jquery who slides three divs horizontally.

FIDDLE

Edit 3: Live demo; complete website showing how I want i

Answer 1

You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid

Also read: Twitter's Bootstrap mobile: more columns and Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

You will need something like:

<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>

Below the 768 pixels your columns will stack (100% screen-width) caused by the col-sm-4. Above the 767 pixels you can use a media query to give your panels a fixed width:

@media (min-width: 768px)
{
.panel {width:200px}
}

update (based on the comment) below.

Try this: http://bootply.com/73541

CSS

@media (max-width: 767px)
{

#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
}

javascript

function showandhide(show)
{
    $('.panel').hide();
    $('#' + show).css('visibility','visible').slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

html

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

Update 2 based on the response.

1) above the 767 pixels, all panel are shown in my example. You will have to reload the page when you resize from small to big. To could also trigger this reload with $(window).resize() note some browser will fire this twice, see https://stackoverflow.com/a/4298653/1596547 for a solution

2) for "sliding in sideways" rewrite this: http://jsfiddle.net/ax4AC/2/:

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });

html (new)

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

javascript (new)

function showandhide(show)
{
    // source: http://jsfiddle.net/ax4AC/2/

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });



  //.slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

//source timeout: https://stackoverflow.com/a/4298653/1596547
var id; 

$(window).resize(function() 
{


        clearTimeout(id);
        id = setTimeout(doneResizing, 500);



});

function doneResizing()
{


    if($(window).width()>=768)
    {
        $('.panel').css('display','block');
        $('.panel').css('visibility','visible');
        $('.panel').css('margin-left',0);
    }   

}   

css (new)

@media (max-width: 767px)
{
.panel{
    margin-left: -260px;
   }
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}


}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
    .panel {display:block; visibility:visible; margin-left:0}
}

see: http://bootply.com/73715 (new!!)

Answer 2

From what I have understood from your question, you have the issue with panel3. You can use to avoid this type of annoyances.check live demo

.panel1, .panel2, .panel3
{
    float: left;
    height: 800px;
    padding: 5px ;
    overflow: none;
}