CODEWITHSUNDEEP
javascriptjqueryanimationslide
nehel
nehel

Reputation: 885

slideUp() on second click jQuery

How can i slideUp() li element on second click?

I have tried with .data() for gathering number of clicks but this method is breaking my css(border) applied with jQuery.

var paragraph = $('p');
var paragraphParent = $('li');

paragraph.addClass('displayNone');
    
paragraphParent.on('click', function () {
paragraph.stop().slideUp();
$(this).children().stop().slideDown();
});
.displayNone{
    display:none;
}

ul{
    list-style-type: none;   
    padding: 0;
    margin: 0;
}

li{
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}

li:hover{
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>Item 1
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 2
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 3
        <p>Lorem ipsum...</p>
    </li>
    <li>Item 4
        <p>Lorem ipsum...</p>
    </li>
</ul>

Upvotes: 0

Views: 78

Answers (3)

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

Try this. here i have used bootstrap collapse

.displayNone {
    display:none;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    width: 200px;
    font-size: 20px;
    background-color: lightblue;
    color: black;
    text-align: center;
    margin-top: 5px;
    padding-bottom: 3px;
}
li:hover {
    cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <ul>
        <li data-toggle="collapse" data-target="#demo1"><a>Item 1</a>

            <p class="collapse" id="demo1">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo2"><a>Item 2</a>

            <p class="collapse" id="demo2">Lorem ipsum...</p>
        </li>
        <li data-toggle="collapse" data-target="#demo3"><a>Item 3</a>

            <p class="collapse" id="demo3">Lorem ipsum...</p>
        </li>
    </ul>
</div>

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you can try

    paragraphParent.on('click', function () {
        paragraph.not($(this).children('p')).slideUp();
        $(this).children().slideToggle();
    });

   paragraph.on('click', function (e) {
       e.stopPropagation();
   });

DEMO

and for count you can use this code

var paragraph = $('p');
var paragraphParent = $('li');

paragraph.addClass('displayNone');
 paragraphParent.on('click', function () {
    paragraph.not($(this).children('p')).slideUp();
    $(this).children().slideToggle();
     // count number of clicks
     var click_num = parseInt($(this).attr('data-count'));
     $(this).attr('data-count' , click_num + 1);
     alert($(this).attr('data-count'));

});
paragraph.on('click', function (e) {
   e.stopPropagation();
});

DEMO

Upvotes: 2

vinayakj
vinayakj

Reputation: 5681

you could use jQuery .data API, as you tried.

$(function() {
  $('ul li').find('p').hide();

  $('ul').on('click', 'li', function() {
    var count = $(this).data('count') + 1;
    $(this).data('count', count)
    if (count == 2) {
      $(this).data('count', 0).find('p').stop().slideDown();
      $('ul li').not(this).find('p').slideUp();
    }
  })
})
.displayNone {
  display: none;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  width: 200px;
  font-size: 20px;
  background-color: lightblue;
  color: black;
  text-align: center;
  margin-top: 5px;
  padding-bottom: 3px;
}
li:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-count="0">Item 1
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 2
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 3
    <p>Lorem ipsum...</p>
  </li>
  <li data-count="0">Item 4
    <p>Lorem ipsum...</p>
  </li>
</ul>

Upvotes: 0

Related Questions