Page design 
Autor: Grigorios A.
Visited 2060,
Followers 4,
Udostępniony 0
Please anyone knows how I can create a hide drop-down description with a photo and be visible dependence the choice of info want the visitor? Like the photo.
Posted on the
Grigorios, perhaps a link the the actual page where you took the screen shot would allow us to more closely answer your request? Unfortunately you are only using the demo version of v13 pro which is pretty old.
I believe you could come up with something similar using a text object and a series of tabs which could display as a slide show or with tab selections for the users.
With the latest versions of WX5 there is also the option of content slider or you may prefer to use the optional accordian text next to an image.
In the accordion it is possible to have an image.
Example :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.
fdsfdsaf
<img src="URL_to_image" align="left" height=50" onmouseover="this.height=150;" onmouseout="this.height=50;">
If you put this in one of the accordion-boxes, then you will have some text with an image. When the image is hovered it will be enlarged.
Of course you have to change the "URL_to_image" to an URL for the image.
This way the image will also be "hidden" when the accordion item is not chosen. And it will appear as the accordion item is chosen
You could also have a link in the text - or have the image being a text.
I have an example here : http://eksempelsite.dk/operational-accordion.html
The accordion used here is not the X5 accordion but an accordion I made myself. But the possibility with the image in the accordion text is also possible in the X5-accordion.
Try click on the accordion and see the image appear - and try to hover the image.
Exactly this effect you can have in the X5-accordion.
Here is an example made with the X5-accordion : http://eksempelsite.dk/sparta02/bullet-list---kopier4.html#Anchor02
Content of box 1
Click an item for further description
Content of box 2
<img src="http://www.energifremtiden.dk/c4d/materiale/copenhagenim_citadel.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.
Content of box 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.
fdsfdsaf
<img src="http://www.energifremtiden.dk/c4d/materiale/copenhagenim_mermaid.jpg" align="left" height=50" onmouseover="this.height=150;" onmouseout="this.height=50;">
Hope it was something like this you meant.
Hello John, do you have a example iwzip from this page for me http://eksempelsite.dk/operational-accordion.html .
Regards,Henk
@Henk
This is a bit off-topic, as I only used the example to show about the image in the accordion items.
If you make a new thread, then we could take it from there
Hello Jonh, i send you a mail on this site http://www.calendarforum.dk/response-page.html
Regards,Henk
Autor
Dear Esahc, I use version pro 2019.3.34.
My website is https://www.micconsultancy.com
Thanks for your advice I will check it.
Grigorios, for future posts I recommend you log into the helpcenter with the email address and password used when you purchased v2019 so we can give the most appropriate reply.
The new content slider is not an accordian, but it does look good and handles responsive display quite well but if you wish to persue an acordian style layout I am sure John's instructions will do the trick.
I suspect these posts are related. . . . ????
https://helpcenter.websitex5.com/pl/post/221799
I can see that you have made a new userid. I continued on the post Esahc refer to.
A new example has been made here : http://eksempelsite.dk/sparta02/marine.html
If this is close to what you ask for, I can give the tex/tcode used in some of the boxes. I used the standard X5-accordion.
If it is not what you mean, then I hope someone else can help you.
John, I am very impressed!!
Whilst I avoid code like the plaque (I bought WX5 because I do not like thinking and in the past I have used code that in later versions stopped working when Incomedia chose to use a few variables I had made up as internal variables), your solution for adding an image to the accordion is wonderful (I have needed to do this for ages). Many thanks!!
@Thanks Esahc
Although I have shown something before, then here is the code:
Code for box 2
<img src="https://www.mieconsultancy.com/images/ship-inspections.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">Our shipping consultancy services include customized modular packages to cater to individual client needs. We understand that every ship-owner/Manager's needs special attention to analyze and strengthen only particular aspects of operation and management. We provide tailor-made solutions for every aspect of marine operation and management.
Code for box 3 ( only the image position is changed - right )
<img src="https://www.mieconsultancy.com/images/Pre-Purchase.jpg" style="padding:5px" align="right" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">A pre-purchase survey is a thorough evaluation of the entire vessel's structure, systems, equipment and machinery which also includes a detailed description of the vessel and summarizing possible recommendations required to bring the vessel to the acceptable standards.
Code for box 6 ( in here is also a link that is made white )
src="https://www.mieconsultancy.com/images/1sm.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">At the forefront of the maritime evolutionary progress.
Being at the forefront of the maritime evolutionary progress we aim to conceive the forthcoming changes in the field and prepare all parties involved for their implementation.
Here is a <a href="http://calendarforum.dk/" target="_blank" style="color:white">Testlink</a> that directs to the calendarforum.dk in a new tab.
Boxes 4 +5 is made with the same princip.
The images could also have been made clickable links. I made a box 7 to show this :
<img src="https://www.mieconsultancy.com/images/1sm.jpg" height="43" onclick="window.open('http://www.calendarforum.dk/restaurant/book-table.html','popup','width460,height640'); return false;" align="left">At the forefront of the maritime evolutionary progress.
Being at the forefront of the maritime evolutionary progress we aim to conceive the forthcoming changes in the field and prepare all parties involved for their implementation.
Here is a <a href="http://calendarforum.dk/" target="_blank" style="color:white">Testlink</a> that directs to the calendarforum.dk in a new tab.
http://eksempelsite.dk/sparta02/marine.html
You can combine as you wish.
If you need further assistance about this, then I suggest you make a link for the page where you have the accordion, and then explain what the problem is. Then I or another here on the forum will help you - I am sure.
Good luck with the accordion.
Correction :
If you need further assistance about this, then I suggest you make a new post and a link for the page where you have the accordion, and then explain what the problem is.
Da.. Additional correction :
If you need further assistance about this, then I suggest you make a new thread and a link for the page where you have the accordion, and then explain what the problem is.
Hi all,
Nice work John!
I had explained (on the French forum in August 2019), but in a more basic way, this possibility of improving the accordion object with links, videos and images.
I was inspired by the ideas of "Axel Software" and your intervention!
https://helpcenter.websitex5.com/pl/post/216055
Your demonstration is breathtaking, thank you !!
J.P.
I think I have made only one "heart" post : https://helpcenter.websitex5.com/pl/post/197999
It was made just after the text-accordion was announced. ( some links does not lead to the expected result anymore). I was happy to see that INCOMEDIA had listened to us users.
At the moment I does not use the X5 software. Only to create examples. But I will still be active here on the forum, I think.
I don't know the purpose with us humans - but one could be to help and inspire where we can.