Code to show/hide a panel

[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

[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

[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

[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.

[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>

[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.

[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

[Tony Barnes]

No worries

[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.