Page 1 of 1
Code to show/hide a panel
Posted: Thu Jan 13, 2011 12:30 pm
by jesterstrickbits
Hi folks,
Does anyone know what code I can use to give a show/hide option to the currency converter
Basically, I like the Currency Converter title to stay but for there to be a show/hide option next to it.
Clicking "show" brings out the full converter panel, clicking "hide" then hides it away so just the title and show option remain.
Is this a complicated or simple request?
I am more than happy meddling with both HTML and CSS although javascript is not something I dabble with without guidance and I presume this is what it needs?
Thanks
Re: Code to show/hide a panel
Posted: Thu Jan 13, 2011 12:51 pm
by jesterstrickbits
meh, I should just google before posting LOL
Have done it now.
If anyone is interested, I'll post below. Also, if anyone has any "tidy up" code tips, please feel free to share
I did this in Design Mode, rather than offline
open Panels/SideCurrencySelector.html
Replace contents (and edit as required)
Code: Select all
<div class="Block Moveable Panel CurrencyChooser" id="SideCurrencySelector">
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click to show converter";
}
else {
ele.style.display = "block";
text.innerHTML = "click to hide converter";
}
}
</script>
<h3>%%LNG_CurrencyConverter%%</h3>
<div id="toggleText" style="display: none"> <div class="BlockContent">
<p>%%LNG_ChooseCurrencyInfo%%</p>
<dl class="CurrencyList">
%%SNIPPET_ChooseCurrencyList%%
</dl>
</div>
</div>
<div style="padding: 5px 0 0 0" align="center"><a id="displayText" href="javascript:toggle();">Click to show converter</a></div>
</div>
There's inline styling in there which I could have put in the CSS and I've replaced the H2 tag that was there with my own H3 tag (because the H2 was running onto 2 lines with excess padding/margins) but the idea is there and it works well.
Does what I wanted anyway
Re: Code to show/hide a panel
Posted: Thu Jan 13, 2011 1:46 pm
by Martin
Would be interesting to see if our resident semi-guru Tony could tweak that to make it collapse when a currency is selected too...
Thanks for sharing that though... Hope that "lovely" balcony weather isn't proving too much of a distraction
Re: Code to show/hide a panel
Posted: Mon Jan 17, 2011 12:11 pm
by Tony Barnes
Presumably simple, you'd just need to add the javascript function in to the snippets/SideCurrencySelector.html file:
Code: Select all
<dd class="ChooseCurrencyBox" style="%%GLOBAL_CurrencyFlagStyle%%">
<a href="%%GLOBAL_CurrencySwitchLink%%; javascript:toggle();" class="%%GLOBAL_CurrencySelected%%">
<span class="Flag">%%GLOBAL_CurrencyFlag%%</span>
<span class="Text">%%GLOBAL_CurrencyName%%</span>
</a>
</dd>
Though as I don't use this code, I'm not sure what the selector does? Does it refresh the page, or does it do it via AJAX? If it refreshes the page, then sending the toggle at the same time would be pointless, as the page would be changed.
On that note, this won't keep the panel toggled when going between pages, will it? Seems to be too simple. You'd have to generate a cookie and reference that to see if they have toggled it already, and then not to have it open on other pages I'd of thought?
If setting a currency already sets a cookie, you could bind onto that for Martin's question, alternatively, again, you'd want to set one.
Re: Code to show/hide a panel
Posted: Mon Jan 17, 2011 12:24 pm
by Tony Barnes
lol, just enabled a currency converter to check - the converter is hidden to start with, and therefore hidden when currency changed anyway Martin!
However, a quick tweak to the code and you've got a nice sliding version:
Code: Select all
<script language="javascript">
function toggle() {
$('#toggleText').slideToggle(400);
}
</script>
So the whole lot becomes:
Code: Select all
<div class="Block Moveable Panel CurrencyChooser" id="SideCurrencySelector">
<script language="javascript">
function toggle() {
$('#toggleText').slideToggle(400);
}
</script>
<h3>%%LNG_CurrencyConverter%%</h3>
<div id="toggleText" style="display: none"> <div class="BlockContent">
<p>%%LNG_ChooseCurrencyInfo%%</p>
<dl class="CurrencyList">
%%SNIPPET_ChooseCurrencyList%%
</dl>
</div>
</div>
<div style="padding: 5px 0 0 0" align="center"><a id="displayText" href="javascript:toggle();">Click to show/hide currency converter</a></div>
</div>
Re: Code to show/hide a panel
Posted: Mon Jan 17, 2011 12:30 pm
by Tony Barnes
In fact, after a little more looking, this seems a nice option:
Code: Select all
<div class="Block Moveable Panel CurrencyChooser" id="SideCurrencySelector">
<script language="javascript">
function toggle() {
$('#toggleText').slideToggle(400);
}
</script>
<a href="javascript:toggle();"><h3 style="text-align:center;">Change Currency</h3></a>
<div id="toggleText" style="display: none"> <div class="BlockContent">
<p>%%LNG_ChooseCurrencyInfo%%</p>
<dl class="CurrencyList">
%%SNIPPET_ChooseCurrencyList%%
</dl>
</div>
</div>
</div>
So it just displays "change currency" in your H3 format at the top, click it, change currency, and done.
Re: Code to show/hide a panel
Posted: Mon Jan 17, 2011 4:13 pm
by jesterstrickbits
Nice, Tony!
Will have a play with that later (hadn't even noticed the responses to my post which is annoying as it's supposed to notify me)
Thanks
Re: Code to show/hide a panel
Posted: Mon Jan 17, 2011 5:17 pm
by Tony Barnes
No worries
Re: Code to show/hide a panel
Posted: Tue Apr 12, 2011 4:31 pm
by manizzi
Hi guys?
Hi Tony?
First post on this forum. Hope am welcome.
First question to tony. In which file did you apply that code to?
I am using shopping cart for my site and I want the currency converter to appear somewhere at the top, probably as a drop-down menu. That way the a user can change the default currency without viewing product details.
Is that what your code does? Please advice.