0

Jsfiddle - modal tabs

HTML

<div id="modal-signup" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="border:0!important; box-shadow: none!important;">
  <div class="mod-signup-wrapper" >
    <div class="modal-header">
      <h3>Sign up a new account</h3>
    </div>
    <div class="modal-body">
      <div class="accordion">
        <div id="step-1">
         <a href="#step-1" class="tab">Step 1 - Information</a>
          <div class="content">
            <div style="background: #fff;">
            <form>
                <input type="text" placeholder="Email Address" name="email">
                <input type="text" placeholder="Password" name="password">
                <input type="text" placeholder="Full Name" name="fullName">
            </form>
            </div>
          </div>
        </div>
        <div id="step-2">
          <a href="#step-2">Step 2 - Select</a>
          <div class="content">
            <div style="background: #fff;">
            skdjfhskfhskdfjksf
              </div>
            </div>
            </div>
      </div>
    </div>
  </div>
</div>

CSS

.accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.accordion > div:target {
  height: 400px;
}

Tried to use herf="step-1" and it worked on certain pages (not over the site) because of the url with /test#step-1 which helped. It showed step 1 tab first when clicking on modal to open. However on other pages with url /#step-1, the step 1 tab is not showing upon opening modal. Is there any way around opening first tab whether /test#step-1 or /#step-1?

Accordion seems not to be flowing or sliding as smoothly as this website: http://www.fortheloveoflaundry.com/

I am not sure why accordion is not sliding up and down smoothly. tried to change transition, height and other css..but no to avail. Is there a way to make it slide smoothly without using Jquery?

Cœur
  • 37,241
  • 25
  • 195
  • 267
joe
  • 1,115
  • 5
  • 21
  • 50
  • off the top of my head, you must use cookies to set the steps and send them to other pages, check out this question: http://stackoverflow.com/questions/1599287/create-read-and-erase-cookies-with-jquery – Amin Jafari Jun 20 '14 at 16:57
  • @AminJafari - by cookie, need to have step1 and step2 set then when tab is clicked, it will tell whether to open step1 or step2? hmm – joe Jun 20 '14 at 17:02
  • sorry I misunderstood your question, I thought you were trying to send the data of the steps to another page, I'm working on your question, will answer if I find a solution – Amin Jafari Jun 20 '14 at 17:06
  • but can you please tell me what's wrong with using jQuery? – Amin Jafari Jun 20 '14 at 17:08
  • @AminJafari - nothing wrong with jQuery but if css can make accordion slide up and down smoothly like the tutorial i saw, then i thought css should be good enough. if it is not possible to use css totally, then jquery is ok. – joe Jun 20 '14 at 17:26

1 Answers1

0

this is the only way I know how, if you need modification just tell me: http://jsfiddle.net/JWfdx/2/

$(function(){
    $('.tab').click(function(){ 
     $(this).parent().siblings().animate({height:'50px'},500);
        $(this).parent().animate({height:'200px'},500);

    });
});
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
  • thanks, but on my local, i tested your script and discovered that .accordion div:target .content {display: block;} will cause the body to disappear. I need the body to show when tab is clicked. Also sliding up and down, content body is jumping. – joe Jun 20 '14 at 18:04
  • Also, how to force step 1 and 2 work for tab to click on? do you know the way? – joe Jun 20 '14 at 18:05
  • what do you want to force when the tab is clicked? – Amin Jafari Jun 20 '14 at 18:06
  • for example, when click [href=#step1] on "information" on the site wide, modal will open, showing body content for step 1. Same for [href=#step2] on "Select" - modal will open and show body content for step 2. Currently on certain page, the accordion is all collapsed when modal opens. – joe Jun 20 '14 at 18:15
  • sorry but tested your fiddle - background black looks jumpy when click on tab. http://jsfiddle.net/JWfdx/3/ – joe Jun 22 '14 at 04:50
  • yes but as I mentioned, I tested with background black, because my screen will be overlay modal with transparent tabs, then background color will be painted on extra div to display content. thats why. i also tested on local and it is jumpy. – joe Jun 22 '14 at 05:45