CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 3755

jQuery show/hide div in direction

I have three div in the code. One is fix, one is for info and one is for detail.

Functioning: Initially I want to show only fix and info part, once click on info I want to show detail and fix and on click on detail I want to show fix and info.

For this part please find the working link : Working Example

$( document ).ready(function() {
        $("#detail").hide();

    $("#info").click(function () {
            $("#info").hide();
            $('#detail').show();
    });

    $("#detail").click(function () {
            $("#info").show();
            $("#detail").hide();
    });
});

My question is:

In this example I want to show detail part moves towards the left side in a way that fix part should always be fixed.

Here you can see the fix part is shifting towards right.

Upvotes: 0

Views: 2152

Answers (6)

R.Rajesh
R.Rajesh

Reputation: 1

Here is the simple syntax to use this effect

selector.hide|show|toggle( "slide", {arguments}, speed );
Following is a simple example a simple showing the usage of this effect −
The jQuery Example 

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <script type="text/javascript" language="javascript">

     $(document).ready(function() {

        $("#hide").click(function(){
           $(".target").hide( "slide", { direction: "down"  }, 2000 );
        });

        $("#show").click(function(){
           $(".target").show( "slide", {direction: "up" }, 2000 );
        });
     });
  </script>

  <style>
     p {background-color:#bca; width:200px; border:1px solid green;}
     div{ width:100px; height:100px; background:red;}
  </style>
      </head>
  <body>

  <p>Click on any of the buttons</p>

  <button id="hide"> Hide </button>
  <button id="show"> Show</button> 

  <div class="target">
  </div>
  </body>      </html>

Upvotes: 0

Som
Som

Reputation: 270

You can also do that by updating your css/style.

Jsfiddle is below.

	$( document ).ready(function() {
   				$("#detail").hide();
   				
   			$("#info").click(function () {
					$("#info").hide();
   					$('#detail').show();
			});

			$("#detail").click(function () {
					$("#info").show();
   					$("#detail").hide();
			});
		});
			
#fix {
	width: 297px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: grey;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	position: absolute;
    right: 0;
    top: 0;
	display:inline-block;
    height: 400px;
}

#info {
	width: 30px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: lightblue;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	display: inline-block;
	height:400px;
}

#detail {
	width: 80px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
	color: #929392;
	background: silver;
	margin: 0 auto;
	margin-top: 50px;
	text-align:left;
	display: inline-block;
	height:400px;
}

#info,
#detail{
    position: absolute;
    right: 297px;
}


#main{
	margin-left: auto;
    margin-right: auto;
    width: 410px;
    position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main">
    <div id="info">
        Info
    </div>
    <div id="detail">
        Detail
    </div>
    <div id="fix">
        fix
    </div>
    
    
    
</div>

Upvotes: 1

Repo
Repo

Reputation: 1745

I put your detail and info inside fix, and then use position absolute to position them. Try the code snippet.. =)

$(document).ready(function() {
  $("#detail").hide();

  $("#info").click(function() {
    $("#info").hide();
    $('#detail').show();
  });

  $("#detail").click(function() {
    $("#info").show();
    $("#detail").hide();
  });
});
#info {
  position: absolute;
  width: 30px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
  color: #929392;
  background: lightblue;
  margin-left: -30px;
  text-align: left;
  float: none;
  display: inline-block;
  height: 400px;
}
#detail {
  position: absolute;
  width: 80px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
  color: #929392;
  background: silver;
  margin-left: -80px;
  text-align: left;
  float: none;
  display: inline-block;
  height: 400px;
}
#fix {
  width: 297px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  font: normal normal 13px Arial, Helvetica, Geneva, sans-serif;
  color: #929392;
  background: grey;
  margin: 0 auto;
  margin-top: 50px;
  text-align: left;
  float: right;
  display: inline-block;
  height: 400px;
}
#main {
  margin-left: auto;
  margin-right: auto;
  width: 410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main">
  <div id="fix">
    <div id="info">
      Info
    </div>
    <div id="detail">
      Detail
    </div>
    fix
  </div>
</div>

Upvotes: 1

Nils Knappmeier
Nils Knappmeier

Reputation: 666

You'll have to change the order of your divs to

<div id="main">
   <div id="fix">
       fix
   </div>
   <div id="detail">
       Detail
   </div>
   <div id="info">
      Info
   </div>
</div>

and replace all your float: left by float: right, although there is always the question whether you should use floats here in the first place.

Upvotes: 0

Ravi Khandelwal
Ravi Khandelwal

Reputation: 726

Try using this, it should help -

$("#info").click(function () {
      $("#info").hide();
      $('#detail').show();
      $('#detail').css('margin-left', '-50px');
});

Upvotes: 0

Yogesh Kumar
Yogesh Kumar

Reputation: 89

$( document ).ready(function() {
    $("#detail").hide();

    $("#info").click(function () {
         $("#info").css({"width":'100%'}).animate({"width":'0%'},200).hide();
         $('#detail').show().css({"width":'0'}).animate({"width":'100%'},200);
    });

    $("#detail").click(function () {
         $("#info").show().css({"width":'0'}).animate({"width":'100%'},200);
         $("#detail").css({"width":'100%'}).animate({"width":'0%'},200).hide();
    });
});

you can use it. it will work. for smoothness may be you have to use overflow hidden container

Upvotes: 1

Related Questions