Wifeo Creative Code

<<< back to homepage for others creatives tricks

MULTI PARAMETERS' ACCORDION

Some parameters

More about these parameters.

A parameter :

A second parameter :

A third :

Some others parameters

More about these parameters...

Parameter 4 :

Parameter 5 :

And... parameter 6 :

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="waaEoG" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/waaEoG'>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/60-multi-parameters-accordion.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.fonct_vid_fonc
{
  padding:20px 0px;
  border-bottom:1px solid #e7e7e7;
  cursor: pointer;
  width:500px;
  background-color:#f8b334;
  padding:10px;
}
.fonct_vid_fonc_der
{
  background-color: #f7f7f7;
  border-bottom:1px solid #e7e7e7;
  padding: 20px 10px;
  margin-bottom:10px;
  display: none;
  width:500px;
}
.fonct_vid_fonc_der > div{
border-bottom:1px solid #ffffff;	
}
.fonct_vid_fonc_der > div:last-child{
border-bottom:0px solid #ffffff;	
}
.fonct_name_fonc
{
  display:table-cell;
  vertical-align:middle;
  width:40%;
  text-align:left;
  color:#4f4f4f;
  font-weight:400;
  font-size:16px;
}
.fonct_descrip_fonc
{
  display:table-cell;
  vertical-align:middle;
  width:50%;
  text-align:right;
  color:#999999;
  font-weight:400;
  font-size:14px;
}
.fonct_pics_fonc
{
  display:table-cell;
  vertical-align:middle;
  width:10%;
  text-align:center;
}
.fonct_ssname_fonc
{
  display:table-cell;
  padding:10px 0px;
  vertical-align:top;
  width:40%;
  height: 50px;
  text-align:left;
  color:#00a096;
  font-weight:400;
  font-size:16px;
}
.fonct_ssdescrip_fonc, .fonct_ssdescrip_fonc_2
{
  display:table-cell;
  vertical-align:top;
  padding:10px 0px;
  text-align:left;
  color:#999999;
  font-weight:400;
  font-size:16px;
}
.fonct_ssdescrip_fonc
{
	width:30%;
}
.fonct_ssdescrip_fonc_2
{
	width:60%;
}
.fonct_model_btn
{
  margin:5px 5px 0px 0px;
  width:90px;
  color:#ffffff;
  display:inline-block;
  border-radius:3px;
  padding:5px;
  text-align:center;
  cursor: pointer;
  transition:all 0.4s linear;
}
.fonct_ssdescrip_fonc > img
{
  margin-left:5px;
  cursor: pointer;
}
.fonct_model_btn:hover
{
  opacity:0.5;
}

JAVASCRIPT CODE :

var posallitemsfonct_vid_fonc = new Array();
$( ".fonct_vid_fonc" ).each(function(  ) {
    posallitemsfonct_vid_fonc[$(".fonct_vid_fonc").index(this)]=$(this).offset().top;	
});

var current_open='-1';
$(".fonct_vid_fonc").click(function()
{
    if(current_open!=$(".fonct_vid_fonc").index(this))
    {
        current_open=$(".fonct_vid_fonc").index(this);

      $(".fonct_vid_fonc_der").slideUp();
      $(this).next(".fonct_vid_fonc_der").slideDown();
      $(".imgderoul").css({"transform": "rotate(0deg)","transition": "all 0.4s linear"});
      $(this).find(".imgderoul").css({"transform": "rotate(180deg)","transition": "all 0.4s linear"});
      $(".fonct_name_fonc").css({"font-weight": "400"});
      $(this).find(".fonct_name_fonc").css({"font-weight": "500"});

      var positionencre =  posallitemsfonct_vid_fonc[$(".fonct_vid_fonc").index(this)] - 100;

        $('html, body').animate({
           scrollTop:positionencre
        }, 'slow');
    }
    else
    {
      current_open='-1';
      $(this).next(".fonct_vid_fonc_der").slideUp();
      $(this).find(".imgderoul").css({"transform": "rotate(0deg)","transition": "all 0.4s linear"});
      $(this).find(".fonct_name_fonc").css({"font-weight": "400"});
    }
});

HTML CODE :

<div align="center">

<div class="fonct_vid_fonc">
    <div style="display:table; width:100%;">
      <div style="display:table-row;">
        <div class="fonct_name_fonc">Some parameters</div>
        <div class="fonct_descrip_fonc">More about these parameters.</div>
        <div class="fonct_pics_fonc">
            <img src="http:YOUR-URL-IMAGE.png" class="imgderoul">
        </div>
      </div>
    </div>
</div>
<div class="fonct_vid_fonc_der">
<!-- DEBUT C -->

    <div style="display:table; width:100%;">
       <div style="display:table-row;">
         <div class="fonct_ssname_fonc">A parameter :</div>
         <div class="fonct_ssdescrip_fonc_2">
             <input name="one" type="text" value="" size="10" maxlength="20">
         </div>

       </div>
    </div>

    <div style="display:table; width:100%;">
       <div style="display:table-row;">
         <div class="fonct_ssname_fonc">A second parameter :</div>
         <div class="fonct_ssdescrip_fonc_2">
             <input name="two" type="text" value="" size="10" maxlength="10">
         </div>

       </div>
    </div>

    <div style="display:table; width:100%;">
       <div style="display:table-row;">
         <div class="fonct_ssname_fonc">A third :</div>
         <div class="fonct_ssdescrip_fonc_2">
             <input name="three" type="text" value="" size="10" maxlength="50">
         </div>

       </div>
    </div>

<!-- FIN C -->
</div>



<div class="fonct_vid_fonc">
      <div style="display:table; width:100%;">
        <div style="display:table-row;">
          <div class="fonct_name_fonc">Some others parameters</div>
          <div class="fonct_descrip_fonc">More about these parameters...</div>
          <div class="fonct_pics_fonc">
              <img src="http:YOUR-URL-IMAGE.png" class="imgderoul">
          </div>
        </div>
      </div>
</div>
<div class="fonct_vid_fonc_der">
    <!-- DEBUT C -->

        <div style="display:table; width:100%;">
           <div style="display:table-row;">
             <div class="fonct_ssname_fonc">Parameter 4 :</div>
             <div class="fonct_ssdescrip_fonc_2">
                 <input name="four" type="text" value="" size="10" maxlength="20">
             </div>

           </div>
        </div>

        <div style="display:table; width:100%;">
           <div style="display:table-row;">
             <div class="fonct_ssname_fonc">Parameter 5 :</div>
             <div class="fonct_ssdescrip_fonc_2">
                 <input name="five" type="text" value="" size="10" maxlength="10">
             </div>

           </div>
        </div>

        <div style="display:table; width:100%;">
           <div style="display:table-row;">
         <div class="fonct_ssname_fonc">And... parameter 6 :</div>
         <div class="fonct_ssdescrip_fonc_2">
             <input name="six" type="text" value="" size="10" maxlength="50">
         </div>

     </div>
    </div>
<!-- FIN C -->
</div>
  
</div>