accordion - jquery - Forum Pasja Informatyki

Cześć,

mama problem z accordion. Całość napisana w jquery. Nie mogę uzyskać efektu aby po kliku w tytuł, treść się rozsuwa a nie jak teraz pojawia od razu.

Druga sprawa chciałbym uzyskać taki efekt, że po kliku w aktywny tytuł (kolor zielony) zamykał się on razem z treścią. Teraz jest tak, że po kliku w inny tytuł zamyka się aktywny tytuł z treścią.

https://jsfiddle.net/h3wr6z95/1/

html

<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat urna, aliquet sed leo ac, bibendum pharetra metus. Sed pharetra sed leo a dapibus. Cras scelerisque congue tincidunt. Quisque ut venenatis mi, eu sodales nisl. Donec auctor eros eget venenatis mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nulla urna, dictum sit amet pulvinar egestas, tempor at est. Mauris pellentesque nibh enim, sed imperdiet mi faucibus efficitur. Fusce quis tincidunt nulla. Sed condimentum lacus mattis nisi gravida porta. Curabitur vel rutrum turpis, vitae semper turpis. Nulla in aliquet sapien. Maecenas consectetur tortor et magna malesuada, efficitur euismod dui aliquam.
Cras non eleifend neque. Suspendisse porta, sapien a accumsan semper, est ex cursus mauris, vel auctor dolor sapien a nunc. Suspendisse eleifend mollis mi, eget iaculis ipsum dignissim non. Maecenas ac dictum lorem, ut euismod tellus. Phasellus ac ante eget lectus feugiat euismod ac id urna. Mauris eget augue urna. Sed odio ligula, consectetur vitae justo nec, porta sagittis magna. Pellentesque cursus vitae dolor sit amet pharetra.</p>

<div class="title title3"><h3>text1</h3><span class="icon icon3"></span></div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat urna, aliquet sed leo ac, bibendum pharetra metus. Sed pharetra sed leo a dapibus. Cras scelerisque congue tincidunt. Quisque ut venenatis mi, eu sodales nisl. Donec auctor eros eget venenatis mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nulla urna, dictum sit amet pulvinar egestas, tempor at est. Mauris pellentesque nibh enim, sed imperdiet mi faucibus efficitur. Fusce quis tincidunt nulla. Sed condimentum lacus mattis nisi gravida porta. Curabitur vel rutrum turpis, vitae semper turpis. Nulla in aliquet sapien. Maecenas consectetur tortor et magna malesuada, efficitur euismod dui aliquam.
Cras non eleifend neque. Suspendisse porta, sapien a accumsan semper, est ex cursus mauris, vel auctor dolor sapien a nunc. Suspendisse eleifend mollis mi, eget iaculis ipsum dignissim non. Maecenas ac dictum lorem, ut euismod tellus. Phasellus ac ante eget lectus feugiat euismod ac id urna. Mauris eget augue urna. Sed odio ligula, consectetur vitae justo nec, porta sagittis magna. Pellentesque cursus vitae dolor sit amet pharetra.</p>
</div>

css

p.text {
  height: 0;
  opacity: 0;
}

.title {
  color: green;
  height: 50px;
  line-height: 50px;
  border: 1px solid black;
  padding: 0 0 0 15px;
  margin-bottom: 3px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1
}

h3 {
  margin: 0;
}

p {
  color: black;
  font-size: 15px;
  border: 1px solid black;
  padding: 0 0 0 15px;
  margin-top: 0
}

.active-title {
  background-color: green;
  color: white;
  transition: all 0.5s ease-in-out;
}

.icon {
  background: url('1.jpg');
  background-size: contain;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  float: right;
  margin: 13px;
}

.active-icon {
  background: url('1.jpg');
  background-size: contain;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  float: right;
  margin: 13px;
  transform: rotate(180deg);
}

(function($){

$(document).ready(function(){

var collapseall = true;
    var titles = $(".title"),
    texts = $("p.text"),
    icon = $("span.icon");



texts.animate({height:'0',opacity:'0'},200); 


        $(titles).click(function(){

            
if(collapseall){


       titles.removeClass("active-title"); ///usuwa kolor
     
      texts.stop().animate({height:'0',opacity:'0'}); 
}

            var that = $(this),
            
                text = that.next();
                isVisible = text.is('height','0');

               
                that.toggleClass('active-title',!isVisible);
              
        if(!isVisible){
         
           
           // that.addClass('active-title');
		text.stop().animate({height:'100%',opacity:'1'},200);
           
        }
        else{
            //that.removeClass("active-title");
         
          
			text.stop().animate({height:'0',opacity:'0'},200);
			
			
			
        }
		
		

       

if($('.title1').hasClass('active-title')){
    $('.title1 .icon').addClass("active-icon");
    $('.title2 .icon').removeClass("active-icon");
    $('.title3 .icon').removeClass("active-icon");
	
			
  
}
else if($('.title2').hasClass('active-title')){
    $('.title2 .icon').addClass("active-icon");
    $('.title1 .icon').removeClass("active-icon");
    $('.title3 .icon').removeClass("active-icon");
  
}
else if($('.title3').hasClass('active-title')){
    $('.title3 .icon').addClass("active-icon");
    $('.title1 .icon').removeClass("active-icon");
    $('.title2 .icon').removeClass("active-icon");
  
}


else {
    $('.title .icon').removeClass("active-icon")
  
}




        });
});


})(jQuery);

Nie używam slideUp i slideDown tylko height i opacity.