CODEWITHSUNDEEP
jqueryhtmlcss
Esjay
Esjay

Reputation: 11

Merging two html that css and jQuery are involved in

With jQuery, I made a carousel with prev/next buttons and a collapsibles/accordion menu.

I am trying to put the accordion into carousel as one slide so I can have multiple accordion menus in one carousel. I made them and did not specify the pixels because I wanted them to be mobile friendly.

When I try to put the accordion in the carousel, the carousel doesn't display the accordion menu very well. It gets messed up.

Can anybody help and let me know what the problem is?

Thank you

carousel code: 

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

//initial display of the first element
$(".collapsible").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");

  $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() {
    //$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");

  var isFirst = $("#carousel").children().first().hasClass("current");
  var isLast = $("#carousel").children().last().hasClass("current");
  isFirst ? $("#left").hide() : $("#left").show();
  isLast ? $("#right").hide() : $("#right").show();

});
#carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

button {
  position: absolute;
  bottom: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 50px;
    text-align: center;
    left: 200%;
    margin-left: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">

  <div id="box1" class="slide">Div #1</div>
  <div id="box2" class="slide">Div #2</div>
  <div id="box3" class="slide">Div #3</div>
  <div id="box4" class="slide">Div #4</div>
  <div id="box5" class="slide">Div #5</div>


</div>
<div>


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

</div>

http://jsfiddle.net/ykbgT/11534/

accordion

 $( function() {
//treat header and content seperatly to manage css and icon

//initial display of the first element
$(".collapsible").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");
  
  $header = $(this);
  //getting the next sibling element
  $content = $header.next();
  
	$header.toggleClass("active")
  $content.slideToggle("fast")
});

  } );
.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #222;
  border-radius: 5px;
  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";
}

.content {
  padding: 0 18px;
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <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>

</body>

http://jsfiddle.net/9oqt1eyz/87

Upvotes: 0

Views: 68

Answers (1)

Nimitt Shah
Nimitt Shah

Reputation: 4587

You are struggling with the position Absolute on the accordian.. You should add another class to all the slide (I have added box class) and set carousal styles to box class.

The class worked for me is below:

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 0%;
}
.box{
    font-size: 50px;
    text-align: center;
    left: 200%;
}

.accordian > div, .accordian button{
  position: relative;
}

Code snippet is as below: Also you can test it here - http://jsfiddle.net/ykbgT/11570/

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

//initial display of the first element
$(".collapsible").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");
  
  $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()	{
        //$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");
    
    var isFirst = $("#carousel").children().first().hasClass("current");
    var isLast = $("#carousel").children().last().hasClass("current");
    isFirst ? $("#left").hide() : $("#left").show();
    isLast ? $("#right").hide() : $("#right").show();
    
  });
#carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;  
}

button {
  position: absolute;
  bottom: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-left: 0%;
}
.box{
    font-size: 50px;
    text-align: center;
    left: 200%;
}

.accordian > div, .accordian button{
  position: relative;
}
.collapsible {
  background-color: #666;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 1px #222;
  border-radius: 5px;
  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";
}

.content {
  padding: 0 18px;
  /* max-height: 0; */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  border-radius: 5px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel">
    
    <div id="box0" class="slide accordian">
      <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 id="box1" class="slide box">Div #1</div>
    <div id="box2" class="slide box">Div #2</div>
    <div id="box3" class="slide box">Div #3</div>
    <div id="box4" class="slide box">Div #4</div>
    <div id="box5" class="slide box">Div #5</div>
  

</div>
<div>


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

</div>

Upvotes: 1

Related Questions