Wifeo Creative Code

<<< back to homepage for others creatives tricks

HORIZONTAL ACCORDION CHOICE WITH JQUERY

OPEN
ME
PLEASE !

Say what you want here my friend

DON'T
CHOOSE
THE
OTHER,
CLICK
ME !

The world is mine (and a little bit yours too... Maybe)

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="cFeuf" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/cFeuf'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/26-horizontal-accordion-choice-with-jquery.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

#zone1{
  width: 70px;
  display:inline-block;
  background-color:#00a096;
  color:#ffffff;
  vertical-align:top;
  height:300px;
  padding:5px;
}

#zone2{
  width: 550px;
  display:inline-block;
  border-left:4px solid #005046;
  background-color:#00a096;
  color:#ffffff;
  vertical-align:top;
  height:300px;
  padding:5px;
}
#btn_zone1{
  cursor:pointer;
}
#btn_zone2{
  display:none;
  cursor:pointer;
  background-color:#00a096;
}
#zone1_content{
  display:none;
}

JAVASCRIPT CODE :

$(document).ready(function () {
  $('.btn_open_zone').click(function(){

    var widthzone1 = $( '#zone1' ).css( "width" );

    if(widthzone1!='70px')
      {
        $('#zone1').animate({width: '70px'});
        $('#zone2').animate({width: '550px'});

        $('#btn_zone2').hide('fast');
        $('#btn_zone1').show('fast');

        $('#zone2_content').show('fast');
		   $('#zone1_content').hide('fast'); 
      }
    else
      {
        $('#zone2').animate({width: '70px'});
        $('#zone1').animate({width: '550px'});

        $('#btn_zone1').hide('fast');
        $('#btn_zone2').show('fast');

        $('#zone1_content').show('fast');
		   $('#zone2_content').hide('fast'); 
      }

		return false;
	});
});

HTML CODE :

<div align="center">
<div id="zone1">
  <div id="btn_zone1" class="btn_open_zone">OPEN<br>ME<br>PLEASE !</div>
  <div id="zone1_content">
  Say what you want here my friend
  </div>
</div><div id="zone2">
  <div id="btn_zone2" class="btn_open_zone">DON'T<br>CHOOSE<br>THE<br>OTHER,<br>CLICK<br>ME !</div>
 <div id="zone2_content">
  The world is mine (and a little bit yours too... Maybe)
  </div>
</div>

NECESSARY EXTERNAL RESOURCES :

• jQuery Library : http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

Edit on CODEPEN

Learn JQuery animate (english) on JQUERY

Learn JQuery show/hide (english) on JQUERY

KEYWORDS :

COMMENT THIS CREATIVE CODE

comments powered by Disqus

Difficulty level :

hard :

medium :

easy :

very easy :

Soigner ses interfaces utilisateur est primordial. Cela passe en partie par l'utilisation de "tricks" et animations CSS/jQuery.

Nous avons choisi de partager sous licence libre creative commons nos astuces et développements de tous les jours afin d'échanger, mais aussi de faciliter la vie des développeurs.
Wifeo Creative Code est un concentré de nos développements quotidiens: servez-vous, utilisez-les et adaptez-les sans aucune restriction. N'hésitez pas à les partager avec vos contacts !

Open code base by Wifeo is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at http://www.wifeo.com/code.
Permissions beyond the scope of this license may be available at http://www.wifeo.com/contact-wifeo.php.

Créer un site gratuitement