CODEWITHSUNDEEP
javascriptjquerycss
Paul
Paul

Reputation: 3368

Using a slideToggle and addClass at the same time

I have a service title list that when you click on the title the description shows. I am running into an issue that I cannot figure out what the best solution is. I am wanting to use jquery's slideToggle method to make the description look as if it is sliding down or a panel is opening up...think parallax look. I am also wanting the text to fade in, so I used the transform:transition approach with opacity.

My issue is that the methods run one by one, so the events do not run simultaneously. I am unsure how I can get this same effect with a pure CSS approach.

Anyone have any ideas?

$(".service-list-wrap").on("click", function(event) {
		var $target = $(this).find('.service-list-description').toggleClass('active').slideToggle(700);
		$('.service-list-description').not($target).fadeOut(300).removeClass('active');
	});
.service-list-title {
  display: block;
  color: #333333;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  margin: 20px 0px;
  padding: 0 10px 0 25px;
  cursor: pointer;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
}

.service-list-description {
  display: none;
  color: #333333;
  font-size: .9rem;
  margin: 10px 0;
	opacity: 0;
	transition: all .35s ease;-webkit-transition: all .35s ease;
}
.service-list-description.active {
	opacity: 1;
	transition: all .5s ease;-webkit-transition: all .5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list-wrap">
  <li class="service-list-title">A</li>
  <p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">B</li>
  <p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">C</li>
  <p class="service-list-description">This is the content for C</p>
</div>

Upvotes: 1

Views: 206

Answers (3)

Rajalakshmi P
Rajalakshmi P

Reputation: 63

This solution may help you - https://jsfiddle.net/nxj6egfz/2/. slideToggle and animate are used.

$(".service-list-title").on("click", function(event) {
    var $target = $(this).next('.service-list-description');
    $target.toggleClass('active', true).slideToggle(700).find('span').animate({opacity: 1}, 3000);
    $('.service-list-description').not($target).slideUp(700).find('span').css({opacity: 0}).removeClass('active');
});

// HTML
<div class="service-list-wrap">
  <li class="service-list-title">A</li>
  <p class="service-list-description"><span>This is the content for 
  A</span></p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">B</li>
  <p class="service-list-description"><span>This is the content for 
  B</span></p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">C</li>
  <p class="service-list-description"><span>This is the content for 
  C</span></p>
</div>

// CSS
.service-list-title {
  display: block;
  color: #333333;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  margin: 20px 0px;
  padding: 0 10px 0 25px;
  cursor: pointer;
}

.service-list-description {
  display: none;
  color: #333333;
  font-size: .9rem;
 margin: 10px 0;

}
span{
  opacity: 0;
}

Upvotes: 1

Pablo Darde
Pablo Darde

Reputation: 6402

So, basically, your html code is not totally correct by the semantic point of view. You have a "li" element as a child of a "div" element. You should have an "ul", or "ol" element as parent of your "li" elements.

So, I hope this possible solution can help you.

https://jsfiddle.net/pablodarde/jkrchwnj/

html

<ul class='list'>
  <li>
    <div class="box" id="A">
      <div class="title">A</div>
      <p>This is the content for A</p>
    </div>
  </li>
  <li>
    <div class="box" id="B">
      <div class="title">B</div>
      <p>This is the content for B</p>
    </div>
  </li>
  <li>
    <div class="box" id="C">
      <div class="title">C</div>
      <p>This is the content for C</p>
    </div>
  </li>
</ul>

css

    ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

.box {
  max-height: 20px;
  border-bottom: 1px solid black;
  overflow: hidden;
  transition: all 0.5s;
}

.box p {
  opacity: 0;
  transition: all 0.8s;
}

.open {
  max-height: 100px;
}

.box .show {
  opacity: 1;
}

jQuery

    const list = document.getElementsByClassName('list')[0];



$('.list li').each(function(idx, li) {
  $(li).find('.title').on('click', function() {
    close($('.list'));
    $(this).parent().addClass('open');
    $(this).parent().find('p').addClass('show');
  });
});

function close(_list) {
  _list.each(function(idx, item) {
    $(item).find('.box').removeClass('open');
    $(item).parent().find('p').removeClass('show');
  });
}

Upvotes: 1

Gerard
Gerard

Reputation: 15786

$("li.service-list-title").on("click", function(event) {
  var $target = $(this).siblings('.service-list-description').toggleClass('active');
});

.service-list-description {
 height:0px;
 opacity:0;
 transition: opacity .5s ease-in-out, height 0.1s;
}

.service-list-description.active {
 opacity:1;
 height: auto;
}

<div class="service-list-wrap">
  <li class="service-list-title">A</li>
  <p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">B</li>
  <p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list-wrap">
  <li class="service-list-title">C</li>
  <p class="service-list-description">This is the content for C</p>
</div>

An example using height:auto Fiddle: https://jsfiddle.net/beekvang/d1g2csqx/5/

Upvotes: 1

Related Questions