How to load on content when click on sidebar (not refresh whole page)

[ChangPa]

Hello,
I’m not use this topic already asked or not. I need to click some item on the sidebar(yellow hilight) then it load on right hand (red circle). I’m not sure how can do this ? Please help advice.

Attachments:

You must be logged in to view attached files.

[Melanie – SUPPORT]

Hi!

It seems you are using the toggle shortcode in a text widget in your sidebar, in which case you can simply replace the # in your link with the actual link of a page you want to link to.

I cannot navigate to anywhere on your website because everything either displays an error or a 404 not found message, so I cannot give you a concrete example 🙁

Let me know if that helped tho!

[ChangPa]

Hello Melanie,
Thanks for your support. Quickly reply !

For 404 maybe I forget to “publish” I just “save draft” (but now published)

Now, I can do as I need above, I use javascript, but I still have a bit question. For now, when click on toggle “watch” > “Model 1” the result on the right is top picture show, below picture hide and when click on “Light” > “Model 1” the result is top picture hide, below picture show.
My question is how a URL change for each “Model” (when clicked) ? My concept is anyone who visited this page can share URL of each “Model/item” to their friend while when he/she click any “model/item” on sidebar, a picture is change but a page still not refresh whole page. For now I can do only change a picture but URL still same, not change.
I’m hope you can get my concern.
Sorry for my bad English.

[Mohammad – SUPPORT]

Hi,
I see that you have code for like at left sidebar.

<a ;="" onclick="tor1()" href="#">Model 1</a>

You should have code like :
<a onclick="tor1()" href="#Model1">Model 1</a>
Thanks 🙂
With Best Regards
Swift Ideas

[ChangPa]

Thanks you so much Mohammad.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad

[ChangPa]

Hi Mohammad,
I have a bit more question. Now, I change a items on the left sidebar to be “Maple 1C” and “Maple 2C”.
Maple 1C is refer to top picture. (Show only top picture)
Maple 2C is refer to bottom picture. (Show only bottom picture)

a code for “Maple 1C” is >> Model 1
a code for “Maple 2C” is >> Model 1

A problem is when I clicked on “Maple 1C” an URL change to be “http://www.changpashop.com/products/changpa-life#maple1c” and a picture show only top picture. Yes ! This is all I need, but when I copy URL “http://www.changpashop.com/products/changpa-life#maple1c” and open it on new windows/browser.
A result not correct. It not show only top picture anymore. It show both. I wonder how can I copy/share this URL and open on other window/browser and a result still correct ?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
We dont offer this type customization in our support. You can try this custom js code at Admin -> Theme Options -> General Options -> Custom JS:-

<script>
var url = document.URL;var idHashShow = url.substring(url.indexOf('#')); idHashShow= (idHashShow=='#maple1c')?'#tor':'#dew';hideid = (idHashShow=='#tor')?'#dew':'#tor'; jQuery(hideid).css('visibility','hidden');jQuery(idHashShow).css('visibility','visible');
</script>

Thanks 🙂
With Best Regards
Mohammad

[ChangPa]

I’ll try it. Thank you so much again for your awesome support !!

By the way, I don’t see Custom JS, I saw only Custom CSS. Is it the same ?

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
You can insert this code without script tag at same file where you have tor() functions code etc.
Thanks