Show or Hide Text 
Author: Peter P.
Visited 3383,
Followers 1,
Shared 0
Hi
Is it possible to show or hide a block of text within a text object by clicking a symbol or button (Now you see it / Now you dont).
Peter.
Posted on the
Hello Peter,
This is not possible by default using the Text Object, but you can accomplish this using the HTML Object in conjunction with some jQuery:
Have a look at the jQuery UI Accordion:
https://jqueryui.com/accordion/
It is easy to implement within WebSite X5, especially as WebSite X5 already incorporates the jQuery library in the web pages it generates.
Kind regards,
Paul
Hi Peter,
you can read this article (in italian language, I'm sorry):
http://quellidelcucuzzolo.blogspot.it/2016/04/effetto-accordion-oggetti-website-x5.html
Peter,
Besides the good posts of other users, maybe this helps you out as well;
I am not sure how or where you need it for, but if the text does not change a lot you could make a picture of that text. Then use the picture object, goto Display TAB and set mouse over effect on Image Overlayed. Then set the a white image as overlay picture. Or the other way around. Then you would see the text (picture) and when going with your mouse over it, it will be the white page. Or the other way around if you prefer.
Best regards, Andre
...are there many way to realize this function; try the code as attachment; put it in html object and change text, font, font-size ecc.
Author
Thank you for all your reply’s to my post, I’m new to Website x5. What I would like to achieve is the same as the descriptions of the people on the right hand side of this webpage, http://www.3ldeliver.co.uk/3ld2/about/
My goal is to give a brief description of each person, then if the visitor wants more info they can either click “more” or hover over the person to reveal the full description.
Best Regards, Peter.
Hello Peter
Try this :
In Your x5 You insert an HTML-code object ( looks like </> )
In this Object You paste the following :
<body>`This is some text`
<span class="more">
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.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
That should do it.
You have to edit the text of course.
Hope this was helpful
Kind regards
John
Hello again Peter
You can see my own site here : http://www.bramming-billard.dk/
The text is in Danish.
I have made it with a picture and beneath the picture a html object.
In the four objects it is only the one that must have the "styling"
You can see the four here.
1 =
<body>LOKALER
<br>
<span class="more">
Klubben råder over 3 lokaler. Eet køkken/kantine/møderum samt 2 sammenhængende lokaler med borde. De sammenhængende lokaler er adskilt af glas og med en døråbning. Dette gør at der kan spilles turnering, samtidig med at der trænes i det andet lokale.
</span>
</body>
</html>
2 =
<body>BORDE
<br>
<span class="more">
Klubben har 6 helmatch turneringsborde. Bordene er opvarmet til 20 gr. Ved alle bordene er der elektroniske scoretavler, og desuden en "manuel" scoretavle.
</span>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 25; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Vis mere >";
var lesstext = "Vis mindre";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
3 =
<body>UDSTYR
<br>
<span class="more">
Til hvert bord, er der en elektronisk scoretavle samt en "manuel" scoretavle. Der er desuden en polermaskine til at holde ballerne pæne. Til undervisningsbrug er der et sæt effektballer. I hvert rum er der en kø-forlænger samt støvsuger til bordene.
</span>
</body>
</html>
4=
<body>DART
<br>
<span class="more">
Klubben har en dartskive og to sæt dartpile. Desuden er der en elektronisk dart-scoretavle. Dartskiven er sat op i et ugeneret hjørne af lokalet. Der kan spilles dart mens der trænes billard, men selvfølgelig ikke mens der spilles turnering.
</span>
</body>
</html>
But maybe You have guessed all this already.
You will see, that I have used the one image, to make a pop-up-showboxgallery. It could also have been made with an image in the text - but this will be the easiest I think.
Kind regards
John
X