4576

jquery toggling all the content

Question:

Hi I'm trying to toggle content sepratly.

For example: if I click on the first content it opens up and the rest stays closed and if I click on the second content the first content closes and the second one opens and it goes on like that until I don't have any more content.

My problem is that when I click on the "+" it opens all the content.

here is my html

<div class="description">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam lacus, auctor vitae urna eget, sollicitudin ullamcorper eros. Ut mattis dignissim tellus, ac scelerisque turpis fermentum vel. Etiam faucibus eros adipiscing turpis commodo, quis pulvinar ligula ultrices. Suspendisse non felis in nisl mollis tristique vitae vitae turpis. Nunc eleifend fringilla lectus ut dapibus. Aenean et dui sed libero gravida vulputate. Proin eu metus sollicitudin, laoreet mi in, cursus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed euismod lacus in metus porta, vitae laoreet justo eleifend. Curabitur urna tortor, egestas in dictum vel, dapibus vel orci. In sed ultricies arcu. Vivamus semper eu quam ut faucibus.

</div> <a href="#" class="toggle-link">+</a> <div class="description">

Duis bibendum diam ut imperdiet pharetra. In hac habitasse platea dictumst. Aenean hendrerit metus et imperdiet consequat. Suspendisse sit amet turpis pellentesque, rutrum tellus vitae, pretium risus. Nunc at mauris nec sem vestibulum dapibus ac eget elit. Cras luctus felis in nibh elementum, ut hendrerit est sagittis. Phasellus quis dolor malesuada, feugiat erat ac, consectetur nisl. Sed auctor dapibus augue, in sagittis ligula congue sed. Curabitur sollicitudin, tortor in scelerisque hendrerit, sem nunc aliquet mi, et accumsan felis dui sit amet erat. Sed fermentum tempus est sit amet malesuada. Donec posuere dui nibh, a ullamcorper nibh interdum sit amet. Maecenas hendrerit in arcu at consequat. Integer tempus dolor at ante ullamcorper sodales. Praesent ultricies turpis id arcu pulvinar, id fringilla metus imperdiet. Etiam felis justo, ultrices a rutrum a, bibendum at dolor. Nam felis nisi, tincidunt fermentum ornare ut, euismod sed felis.

</div> <a href="#" class="toggle-link">+</a>

Here is my Jquery

$.fn.toggleClick=function(){ var functions=arguments; return this.click(function(){ var iteration=$(this).data('iteration')||0; functions[iteration].apply(this,arguments); iteration= (iteration+1) %functions.length; $(this).data('iteration',iteration); }); }; var $dscr = $('.description'), $switch = $('.toggle-link'), initHeight = 40; // Initial height $dscr.each(function () { $(this).data("realHeight", $(this).height()); // Create new property realHeight }).css({ overflow: "hidden", height: initHeight }); $switch.toggleClick(function () { $dscr.animate({ height: $dscr.data("realHeight") }, 600); $switch.html("-"); }, function () { $dscr.animate({ height: initHeight }, 600); $switch.html("+"); });

Here is the link to the jsfiddle <a href="http://jsfiddle.net/cerberus478/hku2N/" rel="nofollow">jsfiddle</a>

Answer1:

Change this part of your code:

$switch.toggleClick(function () { $('.description').animate({ height: 40 }); $(this).prevAll('.description:first').animate({ height: $dscr.data("realHeight") }, 600); $(this).html("-"); }, function () { $dscr.animate({ height: initHeight }, 600); $switch.html("+"); });

<a href="http://jsfiddle.net/hku2N/2/" rel="nofollow">FIDDLE</a>

You want to use $(this) to select the currently clicked element.

Recommend

  • jquery toggling all the content
  • XPath fails on an XML document in R
  • can't write unknown attribute `info' PrawnPDF
  • Unset blank array items on the fly
  • Multiple paragraphs
  • HTML Scroll Box with horizontal controls for vertical scrolling
  • How to have a float:right element with a text block without the text overlapping on it in bootstrap
  • Pass variable into jQuery CSS value to calculate height
  • Collapse jquery tab when click outside of the div
  • Image position divided in half
  • Multi step vertical form using progress bar I have horizontal form so convert vertical model
  • Searching for nested documents on a specific parent
  • Text overflow in circle div
  • jQuery highlight plugin breaks a word with special characters (üöä)
  • Javascript - replace tags in CMS formated content Pt. II
  • How to change color of icons in Font Awesome 5?
  • HTML layout that has flexible left pane and a fixed right. Left can't wrap, must show ellipsis
  • Align mat-cards content (image, text and buttons)
  • What is causing this white box inside my Jquery Accordion?
  • How do I make my side column extend all the way to the end?
  • tag semantic alternative usage
  • Store Bootstrap Data - Modal, Badges and Alerts
  • collection-repeat with angular component, what is happening?
  • Javascript : access return of other function
  • JavaScript Creating array in object and push data to the array
  • Doubt regarding a tail optimized code under 'gdb'
  • jQuery UI Tabs - bind tabs to links on the same page
  • CSS Border DIV as a Shape
  • How to increase the python speed over loops?
  • Alternatives to format text of body email using Google Apps Script (MailApp.sendEmail)
  • Hakyll says “Dependency cycle detected: …”
  • Entity Framework Core 1.0.1 add-migration
  • Insert space after period using sed
  • Use sed with regex and (
  • Silverlight text trimming and wrapping issue
  • In-place sed command not working
  • Get specific string
  • Flexbox equal height doesn't work