jquery - + and - to show and hide sub lists -
i'm working on showing conversation thread, each comment there list of comments, show comments have , sub comments add (+) , (-) allow user show sub comments he/she needs, i'm having trouble that. here code:
html:
<body> <div class='limit'> <div class='comment'> <div class='titre'>titre d'un commentaire statique 1</div> <div class='content'>qui cum venisset ob haec festinatis itineribus antiochiam, praestrictis palatii ianuis, contempto</div> <div class='subcomments'> <div class='reduce'>__</div> <div class='reduce' style="display:none;">+</div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.1</div> <div class='content'>content d'un sous commentaire statique 1.1</div> <div class='subcomments'> <div class='reduce'>__</div> <div class='reduce' style="display:none;">+</div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.1.1</div> <div class='content'>content d'un sous commentaire statique 1.1.1</div> <div class='subcomments'> <div class='reduce'>__</div> <div class='reduce' style="display:none;">+</div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.1.1.1</div> <div class='content'>content d'un sous commentaire statique 1.1.1.1</div> <div class='subcomments'> <div class='reduce'>__</div> <div class='reduce' style="display:none;">+</div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.1.1.1.1</div> <div class='content'>content d'un sous commentaire statique 1.1.1.1.1</div> </div> </div> </div> </div> </div> </div> </div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.2</div> <div class='content'>content d'un sous commentaire statique 1.2</div> <div class='subcomments'> <div class='reduce'>__</div> <div class='reduce' style="display:none;">+</div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 1.2.1</div> <div class='content'>content d'un sous commentaire statique 1.2.1</div> </div> </div> </div> </div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <div class='comment'> <div class='titre'>titre d'un commentaire statique 2</div> <div class='content'>content d'un commentaire statique 2</div> <div class='subcomments'> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 2.1</div> <div class='content'>content d'un commentaire statique 2.1</div> <div class='subcomments'> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 2.1.1</div> <div class='content'>content d'un sous commentaire statique 2.1.1</div> </div> </div> </div> <div class='comment'> <div class='titre'>titre d'un sous commentaire statique 2.1</div> <div class='content'>content d'un commentaire statique 2.1</div> <div class='subcomments'></div> </div> </div> </div> </div> </body> and jquery:
$(document).ready(function () { $('.subcomments').on('click', '.reduce', function () { $(".reduce").toggle("fast"); $(this).parent().children().not('.reduce').toggle("slow"); }); }); css:
.limit { //border: solid 1px blue; margin:0 auto; width:650px; } .comment { //border: solid 1px blue; margin: auto; width: 480px; border-radius: 6px; padding-left: 50px; } .titre { font-size: 1.2em; color: blue; padding: 12px; } .content { padding: 12px; } .subcomments { border-top: solid 1px blue; width: 580px; float:left; } .reduce { font-size:1.4em; color: black; float:left; position: relative; cursor: pointer; } you can demo see problem. have idea?
salut l'ami!
does make job ?
$(document).ready(function(){ $('body').on('click', '.reduce', function(){ $(this).toggle('fast'); $(this).siblings().toggle('slow'); }); }); here updated jsfiddle
edit : can simpler thing :
$(document).ready(function(){ $('body').on('click', '.reduce', function(){ $(this).siblings().addback().toggle('fast'); }); });
Comments
Post a Comment