jQuery only working once?

Hey everyone,

I have a simple script I wrote to make a div larger and smaller by clicking on a "readmore/readless" button. But the problem is it only works once.

The jQuery code is:

jQuery(document).ready(function () {
 
        jQuery('a.desc-readmore').click( function (){
            jQuery('div.product-desc').css('max-height', '550px');
            jQuery('a.desc-readmore').text('Read Less');
            jQuery('a.desc-readmore').addClass('desc-readless');
            jQuery('a.desc-readless').removeClass('desc-readmore');
       
            jQuery('a.desc-readless').click( function(){
                jQuery('div.product-desc').css('max-height', '150px');
                jQuery('a.desc-readless').text('Read More');
                jQuery('a.desc-readless').addClass('desc-readmore');
                jQuery('a.desc-readmore').removeClass('desc-readless');
            });
        });
    });

Code (markup):

and the html is:

<div class="product-desc-container">
            <div class="product-desc">
                <?php echo $_helper->productAttribute($_product, nl2br($_product->getDescription()), 'description') ?>
            </div>
            <a class="desc-readmore">Read more</a>
        </div>

Code (markup):

Any ideas what might be going wrong?

 

I tried doing a little research and came up with this code:

jQuery(document).ready(function () {
        jQuery(document).on("click", "a.desc-readmore", function (){
            jQuery('div.product-desc').css('max-height', '550px');
            jQuery('a.desc-readmore').text('Read Less');
            jQuery('a.desc-readmore').addClass('desc-readless');
            jQuery('a.desc-readless').removeClass('desc-readmore');
        });   
    });

Code (markup):

But that still doesn't work either...

 

jQuery(document).ready(function () {
function reloadFunc(){       
jQuery(document).on("click", "a.desc-readmore", function (){
            jQuery('div.product-desc').css('max-height', '550px');
            jQuery('a.desc-readmore').text('Read Less');
            jQuery('a.desc-readmore').addClass('desc-readless');
            jQuery('a.desc-readless').removeClass('desc-readmore');
reloadFunc();
        });
     
}
reloadFunc();
});

Code (markup):

 

You are changing the DOM so you need to reload the script.

 

Such a stunning example of jQuery for nothing... and not entirely grasping how the DOM works. You're calling a LOT of classes for what should be handled by reference, you're manipulating a lot of things that could simply be handled by your class swap, you're putting elements in the markup that only work when scripting is on and as such have no business in the markup, have no 'exit plan' for when scripting is blocked... So swinging an axe at all that...

shrinker.js

shrinkHandler = {

	addButton: function(parent,desc,className) {
		var a = parent.appendChild(document.createElement('a'));
		a.className = className + ' readButton';
		a.appendChild(document.createTextNode(desc));
		a.onclick = function(e) {
			e = e || window.event;
			var
				p = (e.target || e.srcElement).parentNode,
				state = new RegExp('(\\s|^)sectionReadLess(\\s|$)').test(p.className);
			p.className = p.className.replace(
				' sectionRead'+(state ? 'Less' : 'More'),
				' sectionRead'+(state ? 'More' : 'Less')
			);
		}
	},
	
	setupWrapper : function(targetId) {
		var	t = document.getElementById(targetId);
		t.className += (t.className ? ' ' : '') + 'sectionReadLess';
		this.addButton(t,'Read More','readMore');
		this.addButton(t,'Read Less','readLess');
	},
	
	add : function(targets) {
		targets = targets.split(',');
		for (var t=0; t<targets.length; t++) {
			this.setupWrapper(targets[t]);
		}
	}
}

Code (markup):

Markup:

	<div id="product1" class="shrinkWrapper"><div class="shrink">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p><p>
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
		</p>
	<!-- .shrink, .shrinkWrapper --></div></div>

<!-- this next part should be right before </body> -->
<script type="text/javascript" src="shrinker.js"></script>
<script type="text/javascript"><!--
	shrinkHandler.add('product1');
--></script>

Code (markup):

CSS

.shrinkWrapper {
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats IE */
	margin:1em 0;
	padding:0.5em 0.5em 0;
	border:0.2em solid #DDD;
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
	border-radius:1em;
}

.shrinkWrapper p {
	padding-bottom:1em;
}

.sectionReadLess .shrink {
	overflow:hidden;
	max-height:4.5em; /* 3 lines at 1.5em line-height */
}

.sectionReadLess .readLess,
.sectionReadMore .readMore {
	display:none;
}

Code (markup):

The 'add' function takes a comma delimited list (no spaces) of ID's to add the shrinker to. You can also call that object multiple times if desired. A more robust version would probably getByClassName all the .shrinkWrappers and apply it that way instead of by ID. Calling it before onload means the script only content is added to the DOM before CSS is applied (typically). Because the class to hide things when loaded is added by the script, scripting off all areas will open fully expanded (so people can actually USE THEM).

I tossed a live copy on my server so you can see it working.
http://www.cutcodedown.com/for_others/borduhh/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/borduhh/

... is wide open for easy access to the gooey bits and pieces.

Side note -- and I still say it's dumb as hell that transition:height or width won't work with 'auto'

You REALLY want I could probably rewrite that in jBloaty, but I really don't see the point, it might take it from 958 bytes to 700 bytes -- NOT really worth 32k worth of stupid library garbage.

 

this person gave you write information

 

Thanks for all of that. It really is one of my first times using jQuery.