CODEWITHSUNDEEP
javascriptclick
Dhimas AFanji
Dhimas AFanji

Reputation: 91

Toggle "more/less" text and show only clicked element

I'm trying to select only the clicked element, but it doesn't work. How can I toggle class and text for the clicked element?

Here is my fiddle. What should I change from the following code?

$('.click').click(function() {
 $('.data').each(function() {
  if ($(this).hasClass('open')) {
      $(this).removeClass('open');
  } else {
    $(this).removeClass('open');
    $(this).addClass('open');
  }
});
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});
.container {
  padding: 0;
  width: 100%;
}
.container a {
  display: block;
  padding: 10px;
}
.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}
.data.open {
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">

   <div class="post">
      <div class="data">
        <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

   <div class="post">
      <div class="data">
        <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

</div>

Upvotes: 1

Views: 240

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You don't have to use the each() loop :

$('.click').click(function() {
  $('.data').removeClass('open');
  $('.click').text('more');

  var data = $(this).prev('.data');

  if ($(this).text() === 'less') {
    $(this).text('more')
    data.removeClass('open');
  } else {
    $(this).text('less')
    data.addClass('open');
  }
});
.container {
  padding: 0;
  width: 100%;
}

.container a {
  display: block;
  padding: 10px;
}

.data {
  background: #fff none repeat scroll 0 0;
  height: 10px;
  overflow: hidden;
}

.data.open {
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="post">
    <div class="data">
      <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
    </div>
    <a class="click" href="javascript:void(0);">more</a>
  </div>

  <div class="post">
    <div class="data">
      <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
    </div>
    <a class="click" href="javascript:void(0);">more</a>
  </div>
</div>

Upvotes: 1

BharathwajRK
BharathwajRK

Reputation: 59

Please try with different class names

jQuery

$('.click').click(function() {

$("div[class^='data']").each(function() {

 if ($(this).hasClass('open')) {
     $(this).removeClass('open');
 } else {

   $(this).removeClass('open');
   $(this).addClass('open');
 }
});
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});

CSS

  .container {
     padding: 0;
     width: 100%;
   }

  .container a {
     display: block;
     padding: 10px;
    }

  .data1, .data2 {
      background: #fff none repeat scroll 0 0;
       height: 10px;
      overflow: hidden;
    }

  .open {
     height: auto;
    }

HTML

   <div class="container">

      <div class="post">
          <div class="data1">
            <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
         </div>
      <a class="click" href="javascript:void(0);">more</a> 
       </div>

       <div class="post">
          <div class="data2">
            <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
          </div>
        <a class="click" href="javascript:void(0);">more</a> 
       </div>

    </div>

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42044

You can combine .prev() with .toggleClass():

$('.click').on('click', function (e) {
    $(this).prev().toggleClass('open');
    $(this).text(this.textContent == 'less' ? 'more' : 'less');
});
.container {
    padding: 0;
    width: 100%;
}

.container a {
    display: block;
    padding: 10px;
}

.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}

.data.open {
    height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="post">
        <div class="data">
            <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
        </div>
        <a class="click" href="javascript:void(0);">more</a>
    </div>
    <div class="post">
        <div class="data">
            <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
        </div>
        <a class="click" href="javascript:void(0);">more</a>
    </div>
</div>

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56487

So, since we have multiple div with class data we are getting both of them toggled.

To solve this. After the click happens, we select the button on which the click happened using $(this), then get the correct div with class data using the jquery method .prev() and execute the same logic! 

$('.click').click(function() {

   $(this).prev('.data').each(function() {

    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
    } else {

      $(this).removeClass('open');
      $(this).addClass('open');
    }
  });
   $(this).text( $(this).text() == 'less' ? 'more' : 'less');
});
.container {
  padding: 0;
  width: 100%;
}

.container a {
  display: block;
  padding: 10px;
}

.data {
    background: #fff none repeat scroll 0 0;
    height: 10px;
    overflow: hidden;
}
.data.open {
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

   <div class="post">
      <div class="data">
        <div>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

   <div class="post">
      <div class="data">
        <div>bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb</div>
      </div>
   <a class="click" href="javascript:void(0);">more</a> 
   </div>

</div>

Upvotes: 0

Related Questions