Christmas Present. See More... link that displays additional text.

[NormanRouxel]

This patch adds a way break up long bits of text with a "See More..." link that hides the text
below it until the link is clicked. The hidden text then scrolls into view. A subsequent click re-hides it. All the text is still on the page so Google, etc can find it.

You can use this on Fragments or Products (or anywhere you have long lumps of text).


INSTALLATION

This is for sites with jQuery already loaded. If you've got any of my add-ons, you probably already have this. If you're using SellerDeck 2014 or later, then jQuery is loaded by default.

Go to Design / Library / Layouts / JavaScript Header Functions / Standard JavaScript Header Functions.

Scroll down to the bottom and after everything append the following:

<!-- SeeMore support -->
<script type="text/javascript">
	function seemore(anc){
		$(anc).text( $(anc).next( ".seemore" ).is( ":visible" ) ? $(anc).attr('data-text') : $(anc).attr('data-hide'));
		$(anc).next( ".seemore" ).toggle(500);
		return false;
	}
	$(document).ready(function(){
		$( ".seemore" ).each(function(){
			var linktext = $(this).attr('data-link') ? $(this).attr('data-link') : 'See More...';
			var hidetext = $(this).attr('data-hide') ? $(this).attr('data-hide') : 'Hide...';
			$(this).hide().before('<a href="#" onclick="return seemore(this)" data-text="' + linktext 
				+ '" data-hide="' + hidetext + '" class="seemorelink">' + linktext + '</a>');
		});
	});
</script>

OK out and that's the tweak installed.


OPERATION

In your Fragments / Product Descriptions where you want some "See More..." type stuff to start put:

!!<<span class="seemore">>!!

Then all the text that you want to keep hidden.
End that text with:

!!<</span>>!!

Example:

Text that will be shown all the time.
Text that will be shown all the time.
Text that will be shown all the time.
Text that will be shown all the time.
!!<<span class="seemore">>!!
Text that will be hidden.
Text that will be hidden.
Text that will be hidden.
Text that will be hidden.
Text that will be hidden.
!!<</span>>!!

NOTES

You can also use this on other tag types and you can customise the See More... and Hide... bits
on a per-link basis as follows:

!!<<div class="seemore" data-link="Expand..." data-hide="Dismiss">>!!
.
.
.
!!<</div>>!!

You can use this multiple times on a page and even multiple times within the same description.

[Buzby]

Just an SEO question though, would this be classed as hidden text, any views?

[peblaco]

See: How does Google treat hidden content which becomes visible when clicking a button?

[sellerdeck4life]

Great Post

Hi Normann

First off, thanks for sharing this feature.. its something that I've been looking for. Ive tried it and tested it and it works perfectly.

But the thing is.. I wanted to use the 'see more' feature to show a table that is linked to every product. So for example, the full description of our products are written in a way where a bit of PHP converts it to a table.

So this is how my full description looks

xxxxxxxxxxxxxxxxxxxxxx
!!<<span class="seemore">>!!
product code for the table
!!<</span>>!!

However when I do this, it doesnt show the table in the see more bit, it just shows it regardless.. it seems that something maybe conflicting.

Does anybody know how I can get round this?

Please visit the link below to see the example..

http://toplinecarparts.com/acatalog/...10.html#SID=58

Thanks in advance
Dave.

[NormanRouxel]

Your problem may be because you're putting a block element like a table within a span that should only hold inline elements.

Try using:

!!<<div class="seemore">>!!
product code for the table
!!<</div>>!!

P.S. Your wheelhub.png image is a ridiculous 750Kb in size and that and other overly large images makes your page load very slowly. Page total weight is 7 MEGABYTES of which 6.4Mb are images. Resaving as wheelhub.jpg gives me a visually identical image but at a size of only 19Kb!

P.P.S. a bit of PHP converts it to a table - that was one of mine as well.

[Buzby]

Hi Dave,

Following on from Norman's post above, have a look at Faststone image resizer HERE

It is free and we use it for compressing all images on our sites.

You should easily be able to reduce the file sizes by 90% to 95%

[sellerdeck4life]

Thanks!

Hi Norman,

The html code you provided worked and now it looks exactly how I wanted it.. Thank you so much!.

P.S .. Im not sure why I saved these images in png to be honest.. but having read what you suggested, it has made a huge difference to the size of the pictures so thanks for that.

P.S.S I guessed my boss purchased that feature off you then, he used it on his old website years ago.

------------

Thanks for providing that tool Jason, much appreciated.

[NormanRouxel]

It was another of my "present" type add-ons. See http://community.sellerdeck.com/showthread.php?t=46322 for the original article.

[sellerdeck4life]

Thanks!

Hi Norman..

I didnt realise it was another present, but thanks for sharing that as well!!

I was hoping to try and style the 'See More' and 'Hide' text and managed to rename it so that customers know to click on it to see Part Details..

However I wanted to style it further to make it stand out more from the other text that looks the same. Is there a way to make the the 'Part Details' link as an image instead? You can click on the link below to see how its set up at the moment.

http://www.toplinecarparts.com/acata...10.html#SID=58

Thanks in advance

[guccij]

I'm having trouble with this in v14. Using either the div or span code can hide not just the text, but also the attributes and choices.

This page - example - should have three colour options.

However they don't show at all, not even when the See More ... link is clicked.

Yet it works on this page.

Now it could be the Soapbox layout and not Norman's code of course. I'm stumped. I've tried gazillions of ways round it but no joy.

[guccij]

OK so it looks as if it's my problem not the code's.

It works perfectly well without Soapbox. So I must have put the layout for the latter in the wrong place. Grr.

And there was me thinking I had this Sellerdeck thing cracked.

[feemish]

Hi Norman,
Thanks in advance for this Christmas present that I've just found
I have your NorPrice code on my old site, but I'm wanting to implement this 'See more' code on a new Smart Responsive 14.0.1 site.
So I dont have jquery already loaded.
How do I do that?

I've found a file called
jquery.min.js
in the old Nor Price Folder (V207-V1004-GreyboxRedux-JQuery.zip)

I've also got
jquery-1.8.3.min.js
in NorPrice V2-V403 Upgrade SD V10

but neither instructions seem to add these files as additional files....

[feemish]

I found this;


http://www.w3schools.com/jquery/jquery_get_started.asp

One big advantage of using the hosted jQuery from Google or Microsoft:

Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

So I am thinking I can just use;

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

in the head of my outer layout.

Otherwise I expect I have to download the compressed jQeury1.11.3.min.js from the link above and upload it as an additional file and use;

<head>
<script src="jquery-1.11.3.min.js"></script>
</head>

[NormanRouxel]

You don't have to load jQuery. It's part of SD 2014 as standard.

I've amended my original post to inform people about this.

[feemish]

Doh!

Thanks Norman