Merging accordion menu and jquery carousel

1
votes

With jQuery, I made a carousel with prev/next buttons and a collapsible/accordion menu. Then I put the accordion menu into carousel as slides so I can have multiple accordion menus that change with sliding animation when buttons are clicked.

I want to locate buttons nicely. How should I jiggle HTML and CSS to locate buttons below the end of contents? I am trying to add a div class="footer" below the carousel, that includes two buttons so whenever users click the button. the div including buttons wouldn't move and stay there and only the content above (one accordion menu) will slide.

Here's the fiddle: http://jsfiddle.net/ykbgT/11656

Current HTML structure is like this:

<div id="carousel">
    <div class="slide">Accordian menu content 1</div>
    <div class="slide">Accordian menu content 2</div>
    <div class="slide">Accordian menu content 3</div>
</div>

<button id="left" class="prev" >&larr;Previous</button>
<button id="right"  class="next">Next&rarr;</button>

Here's expected outcome below: enter image description here

1
javascriptjqueryhtmlcss
Can you share the expected output? – Naren Verma

1 Answers

0
votes

To locate your buttons always at the end of your content, I chose to remove absolute position on "#carousel" and change its height every time I resize window, click on accordion button or click on prev next button.

I removed also height 100% from every slide in css 'cause now command the "#carousel" height.

In the end, I put your next-prev button in a footer (as you said) in a static position so it can change position when "#carousel" height change.

//treat header and content seperatly to manage css and icon

//initial display of the first element

    $(".slide").each(function() {
        $(".collapsible", this).first().toggleClass("active").next().show()
    })
    $(".collapsible").on("click", function()    {
        //in case of clicking again the same element already open
        if($(this).hasClass("active"))  return
        //closing other contents
        $(".active").toggleClass("active").next().slideUp("fast",function(){
            currentHeigh(); // My addition
        });
      
      $header = $(this);
      //getting the next sibling element
      $content = $header.next();
      
        $header.toggleClass("active")
      $content.slideToggle("fast")
      
    });

      $("#carousel").children().first().addClass("current").css("left", "0%")
      $("#left").hide()
       
      $(".prev, .next").on("click", function() {
        $currentDiv = $(".current");
        //console.log($currentDiv)
        
        if($currentDiv.is(":animated")) return; // Don't register clicks if it's animating

        var isNext = $(this).is(".next"),
            w = $currentDiv.width() ;
        //animate the current div to the left and place it on the right side (out of the screen)
        $currentDiv.animate({
            //left: '-100%'
                left: (isNext ? '-100%' : '100%')
        }, 500, function()  {
            //$("#carousel").css({"height":$currentDiv.height()})
            //$currentDiv.css('left', (isNext ? '-100%' : '100%'))
            //$currentDiv.appendTo('#container');
        }).removeClass("current");
        //bring the before/next div onto the screen
        $nextDiv = (isNext ? $currentDiv.next() : $currentDiv.prev())

        $nextDiv.css('left', (isNext ? '100%' : '-100%'))
        $nextDiv.animate({
            left: '0%'
        }, 500, function() {
            
        })
        
        $nextDiv.css('left', '100%').addClass("current");
        currentHeigh();  // My addition
        
        
        
        
        var isFirst = $("#carousel").children().first().hasClass("current");
        var isLast = $("#carousel").children().last().hasClass("current");
        isFirst ? $("#left").hide() : $("#left").show();
        isLast ? $("#right").hide() : $("#right").show();
        
      });

         // My addition

        currentHeigh()

        function currentHeigh(){
           // In this function I check the height of the div with .current class (with its margin and padding) and set it on #carousel div so we are sure that now #carousel and .current div have same height. 'cause #carousel now is in static position (the default one), every other div is positioned immediately below (i.e. footer in this case)
            $("#carousel").animate({
                height: $(".current").outerHeight()
            }, 100)
           
        }

        var resize;
          $(window).resize(function() {
          // put a simple time out to trigger currentHeigh() only when resize action finish
            clearTimeout(resize);
            resize = setTimeout(resizeStuff, 200);
          });
          
          function resizeStuff() {
            currentHeigh()
          }
body{
            overflow-x:hidden;
        }
             *{
 box-sizing:border-box;
 }
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h5 {
    display: block;
    font-size: 0.83em;
    -webkit-margin-before: 1.67em;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
h6 {
    display: block;
    font-size: 0.67em;
    -webkit-margin-before: 2.33em;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
#carousel {
    /*position: absolute;*/
    background-color:#ffffff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

button {
  /*position: absolute;*/
  padding: 1em;
  border-radius: 0.3em;
  overflow:hidden;
}
.prev{
  /*bottom: 2em;
  left: 2em;*/
  float:left;
  margin-left:1em;
}
.next{
  /*bottom: 2em;
  right: 2em;*/
   float:right;
   margin-right:1em;
}
.slide {
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    margin-left: 0%;
    left: 200%;
    
    padding: 1em;
    overflow-x: hidden;
    overflow-y: visible;
}
/*
.box{
    font-size: 50px;
    text-align: center;;
}
*/
.slide > div, .slide > button{
  position: relative;
}
.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 1em;
  width: 100%;
  border: solid 1px #222;
  border-radius: 0.3em;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active {
  background-color: #333;
}
@media (hover: hover) {
  .collapsible:hover {
    background-color: #777;
  }
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.slide > .content {
  padding: 18px 18px;
  /* max-height: 0; */
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}
.footer {
  padding: 5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">
    
    <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Breakfast</h1>
      <button class="collapsible">Entrees Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Sides Limit 3</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Hot Cereal Limit 1</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Condiments</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
     
    </div>
    
     <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Lunch</h1>
      <button class="collapsible">Lunch-select 1 option</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>

     <div class="slide">
      <h3>Please complete your meal selection.</h3>
      <h1>Dinner</h1>
      <button class="collapsible">Dinner-select 1 option</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button class="collapsible">Beverages Limit 2</button>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>

</div>
<footer>
 <button id="left" class="prev" >&larr;Previous</button>
 <button id="right"  class="next">Next&rarr;</button> 
</footer>