jQuery toggleClass example

Toggle class name on click in jQuery

by Dedi Wibisono

HTML

<div class="all">
  <div class="wrap">
    <p>
      Hi, Please click data
    </p>
    <div class="data" data-content="0">data 1</div>
    <div class="data" data-content="1">data 2</div>
  </div>  
</div>

CSS

.data {
  background:tomato;
  color:white;
  padding:8px;
  display:inline;
  cursor:pointer;
}

.all{
  height: 200px;
  border:1px solid;
  overflow-y:auto;
  padding:0 8px;
}

JavaScript

var data = [
  {
    "content": `
    <p>first content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    `
  },
  {
    "content":`
    	<p>second content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam accusamus, maiores velit aut sint perspiciatis facilis. Asperiores expedita, iusto suscipit aut numquam corporis sunt sint eius dolorum ea, adipisci saepe.</p>
    
    `
  }
];

//$('.data').click(function(){
$(document).on('click','.data', function(){
	var datacontent = $(this).attr('data-content');
  
  $(this).parent().parent().append(`
  	<div class="wrap wrap-${datacontent}">
    	<p>${data[datacontent].content}</p>
     	<div class="data" data-content="0">data 1</div>
      <div class="data" data-content="1">data 2</div>
    </div>
  `);
  
  var cekscroll = $(".all").height();
  var cekclient = $(`.wrap-${datacontent}`).height();
  console.log(cekclient - cekscroll);
  console.log('wrap height:', cekclient);
  console.log('all height:',cekscroll)
  
  $('.all').animate({
  	//sepertinya disini bugsnya
    //scrollTop: $('.all').props('scrollHeight')
   ...