Drop down list for long text pages 
Author: Paul W.
Visited 2332,
Followers 1,
Shared 0
I have a couple of webpage that has a long list of text. http://www.jpw.ca/protect-and-grow-.html
I would like to use this format https://answers.websitex5.com/projects/howto
to display the information
Any suggestions?
Paul
Posted on the
Hello Paul,
The drop-down text effect on the answers.websitex5 link that you posted is achieved using a custom jQuery function:
<script> $(function() { //onDomReady //show the content on click var elem = $('#templates-howto h2'); elem.click(function() { $(this).toggleClass('selected').next('div.inner-faq').animate({height: "toggle", opacity: "toggle"}); }); var hash = [removed].hash; if (hash !== '') { // if hashtag -> open the relative faq $(hash + ' h2').toggleClass('selected').next('div.inner-faq').animate({height: "toggle", opacity: "toggle"}); } else { // no hastag -> open the first faq setTimeout(function(){ elem.first().click(); }, 500); } }); </script>
The functions can be easily studied by viewing the source code of that particular web page in your browser (right-click on the page and select 'View page source' or similar).
You could copy parts of the code and adapt them to suit your own particular purposes.
Or you could search for a similar jQuery function on the web. You will often find helpful instructions listed along with the jQuery, advising the user how to incorporate the function into their web page. Remember that you do not need to load jQuery before calling a jQuery function, as WebSite X5 already references jQuery in the web pages it produces.
WebSite X5 does not have any native ability to show/hide text without resorting to the use of JavaScript or jQuery in this way.
The Professional version of WebSite X5 has the ability to create tabbed pages within the Text Object, which is useful to break up long chunks of text into a more orderly format.
Kind regards,
Paul
Author
Hi Paul,
Thank you for responding. Just tom confirm my understanding:
I should first copy the custom jQuery function into the head section and then refer to the source code on the page for copying for my needs. Not exactly sure what I need to copy, but I am sure I figure it out.
Does it matter if if use a html section or a text section that is html enabled?
Paul
Author
I have upgraded to the professional version and will make use of the tabs.
Am I correct in assuming that project created in Evolution can simply be openned in professional with no limitations?
Yes, that's correct Paul... there are no limitations whatsoever.
As regards the jQuery function(s), the code I reproduced above is actually contained within the BODY section of the web page, which makes sense as the DOM must have finished loading before it can be manipulated by jQuery.
It's not a straightforward copy and paste, but I was trying to imply that if you examine the code carefully enough then it should be obvious where you can change variables and other parts of it to suit your own needs. For example '#templates-howto h2' would clearly have to be substituted for your own data as appropriate.
I would add scripts like this using the 'Expert' properties tab of the WebSite X5 page which you wish to work with, as opposed to an HTML object, or a Text Object with HTML enabled.
Here is a link to some further information on the jQuery method used:
https://jqueryui.com/toggleClass/
Author
I have imported my site and here is a http://jpw.ca/test-rows.html trying out the tabs
yes. I can get the text to toogle. But it does not look like https://answers.websitex5.com/projects/howto
How do I have the default position to be up with the user having to click it down?
How do I have the default position to aligning text to the left?
Is that something you can help with?
Can you expand on those two questions please, Paul? I'd like to help if I can but am struggling to grasp what you mean.
Author
I kept working on it and I followed you advice and it is on the test page. http://jpw.ca/test-rows.html The question I asked was before I made changes - sorry for the confusion.
Here is my roadblock. How do align the text to the left. I followed the instructions at https://jqueryui.com/accordion/#default and it worked - thank you for your help - great resource!
I put the this in before the header on the page's expert section:
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Fill space</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#accordion-resizer {
padding: 10px;
width: 350px;
height: 220px;
}
</style>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>
Since I am using the professional version is there anything I should change above?
It works but the program does have some things built in.
It looks as if you are using the Table Object in WebSite X5 to display this text, Paul, yes? If that is the case then you can set the text alignment for each cell in the table by highlighting single or entire groups of cells, then clicking on the 'Align Left' icon in the editing toolbar above (please see the screenshot attached for details on where to find this)
That should change the CSS which WebSite X5 generates from the existing code:
<div id="imCell_59" ... style=" overflow: hidden; text-align: center;">
...to this:
<div id="imCell_59" ... style=" overflow: hidden; text-align: left;">
Author
No in an html code generated box.
Thought you should know and I want to thank you for letting me know about the Tabs function in Prfessional. For me that alone was a reason to upgrade.
I rote the code in an html object to produce the website page. I could not get it to work in the html text .
The jQuerty code avove has referenves to code on the jQuery site. Should it be address to something else ?
You should be able to remove this line without causing any problems:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
This is because your user's browser will already have cached the jQuery which WebSite X5 uses, which can be found at the following URL:
http://jpw.ca/res/jquery.js
And because (crucially) they are the same version in this case. Removing the reference to the second copy will optimise page load times, which will in turn benefit your website SEO.
Your code should still run OK... I would be interested to know if you experience any difficulty.
This line has to stay, though! - <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Regarding the code which you have in an HTML Object, simply edit the CSS class manually so it reads...
text-align: left
instead of...
text-align: center
Glad you like the Professional version, Paul.
Author
I removed the line and it still works fine. Thank you
I h P ave no idea how to fine let alone edit the CSS .
Help please Paul
I will do my best to help, Paul.
You say that you put your code in an HTML Object? There is an 'Expert' tab linked to the HTML Object which allows you to style the contents of the Object using CSS code. Please paste the following code into this area, as illustrated in the screenshot attached:
<style type="text/css">
accordion {text-align: left;}
h3 {text-align: left;}
p {text-align: left;}
</style>
I think that should do the trick in your own case, but it's never easy when the code isn't in front of you. So do please let me know if there are still issues.
Good luck!
Paul