After extensive research on the topic, I have come across numerous methods but none that fully meet my requirements.
In Typo3, I am attempting to create multiple links that, when clicked, will change the text displayed in a designated area below the links. Whenever a new link is clicked, I want the previous text to be replaced with the information from the newly selected link.
To simplify, think of it as a picture gallery where instead of images, the text changes. Please let me know if further clarification is needed. Any assistance would be greatly appreciated.
UPDATE: I am aiming for a similar functionality to what can be seen on this page. However, instead of the div becoming visible on hover, I need the text to display and remain OnClick until the next selection is made.
While currently using code for hover effects, I require it to trigger on click for display purposes.
<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">
#Style {
position:absolute;
left:218px;
top:300px;
visibility:hidden;
border:none 1px #CCC;
padding:5px;
}
</style>
<div id="CC1" style="position:absolute; left:30px; top:472px;"><a href="#" STYLE="TEXT-DECORATION: NONE" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)"><center><h1 style="color:white; font-size:125%;">Lorum Ipsum<center></a></div>
<div id="Style"><img src="http://www.example.org/fileadmin/template/images/CCSS/TextBox.png"><div style="position: relative;top:-285px;font:12pt;font-weight:bold;color: #0067b2;margin-left: 15px;width:280px">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div></div>
I have successfully implemented the desired effect using the provided code. My only challenge now is that all divs are initially displayed when the page loads, and one must be clicked to hide the others. Any suggestions on how to improve this behavior?
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}