Web accordions vertical & horizontal

Published on by Yousfi Benameur

Web accordions in css3 are simple to use and they are very attractive

This page presents 3 codes building
-1) vertical accordion with images folder and fullscreen capabilities
-2) horizontal accordion with images folder and fullscreen capabilities
-3) a mixed texts+images accordion as sample.

note;  to make Firefox (or iexplore.exe, chrome.exe.....), lauched automatically without specifing the location path can use this command line(type in windows start):


setx path "%path%;C:\Program Files\Mozilla Firefox"

I) A VERTICAL ACCORDION

this is a vertical web accordion with css3 adapted to show a folder of images and fully working on disk.Its html and css codes  mixed with vfp.
I added msdn usefull API fullscreen navigator on each image  from msdn

https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx

-can use te fullscreen ms browsers API  on html,css ,iframes for   objects elements as image,video,div,...it have many members listed in
the link above.
You can use the fullscreen API to bring video, images, and other content to a user's full attention.
click on any image to make it on entire fullscreen.make new click  to return.
adapted from  original free vertical web  accordeon with css3- 
http://beta.rdsign.net/article_51
i loaded on the accordion 240 images without problem.


i wanted to adapt this code to vfp ie browser (emulation ie11) but there is not yet well rendered (gradient problem)-you can try it.

*firefox is used for viewing the result.

*1*

*begin code

If !_vfp.StartMode=0
    On Shutdown Quit
Endi
Local m.xcolor,m.ycolor

_Screen.Visible=.T.
m.xcolor=Getcolor()
If Empty(m.xcolor) Or m.xcolor=-1
    m.xcolor=Rgb(0,230,0)
Endi
m.ycolor=yhtmlcolor(m.xcolor)
_Screen.Visible=.F.

Local m.yrep,m.yrepIM
m.yrep=Addbs(Sys(2023))   && in temp folder

m.yrepI=Getdir()
If Empty(m.yrepI)
    Return .F.
Endi
m.yrepI=Addbs(m.yrepI)

Local gnbre
gnbre=Adir(gabase,m.yrepI+"*.*")
If gnbre=0
    Return .F.
Endi

Local m.xx,m.yy,j
m.xx=""
j=0
For i=1 To gnbre
    If Inlist(Lower(Justext(m.yrepI+gabase(i,1))),"jpg","png","gif","bmp")
        j=j+1
        TEXT to m.yy textmerge noshow
<li>
            <a href="##"><span> -<<trans(j)+"-"+allt(juststem(gabase(i,1)))>></span></a>
            <div class="fullscreen" title="Click for fullscreen on/off  !">
            <div>
                <span style="cursor:pointer"><img src="file:///<<m.yrepI+gabase(i,1)>>" width="430" height="300"></span>
            </div>
            </div>
        </li>
        ENDTEXT
        m.xx=m.xx+m.yy+Chr(13)
    Endi
Endfor

TEXT to m.yy textmerge noshow
<li>
            <a href="##"><span> -<<"- Blank image">></span></a>
            <div>
                <img src=""" width="430" height="300">
            </div>
        </li>
ENDTEXT
m.xx=m.xx+m.yy+Chr(13)  && just for view real imagebefore
m.xx=m.xx+m.yy+Chr(13)
m.xx=m.xx+m.yy+Chr(13)

Messagebox(Trans(j)+" images in"+m.yrepI+ " ",0+32+4096,"",1200)
Local m.myvar
TEXT to m.myvar textmerge  noshow
<html>
<head>
    <title>Vertical Accordion vertical with  CSS3</title>
<style>

/* reset normal style*/

.unBlog img {
    padding: 0px;
}

/* reset normal style*/

.accordeon {
    width:430px;
    height:100%;
    overflow:hidden;
}
.accordion>ul>li>div {
    background-color:#fff;
    border-style:solid;
    border-color:#ccc;
    border-width:1px 0;
    height:300px;
    padding:10px;
    width:430px;
    margin-top: -296px;
}

.accordion>ul>li>div {
    transition: margin-top 0.5s ease-in-out 0.1s;
    -moz-transition: margin-top 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-top 0.5s ease-in-out 0.1s;
    -o-transition: margin-top 0.5s ease-in-out 0.1s;
}

.accordion>ul>li:hover>div {margin-top:0px;}

.accordion>ul>li>a {
    -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=<<m.ycolor>>, endColorstr=#74892d);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
    background: -moz-linear-gradient( center top, <<m.ycolor>> 5%, #74892d 100%);
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:-1px -1px 0px #000000;
    height:25px;
    width:450px;
    float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;
}
.accordion>ul>li>a:hover{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<<m.ycolor>>', endColorstr='#56661f');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
    background:-moz-linear-gradient( center top,<<m.ycolor>> 5%, #56661f 100% );
    color:#fff;
}
.accordion>ul {margin:0;padding:0;list-style:none;width:430px;}
.accordion>ul>li {float:left;overflow:hidden;width:450px;}
.accordion > ul > li > a > span {
    bottom: 5px;
    display: block;
    left: 12px;
    position: absolute;
    white-space: nowrap;
    width: 440px;
}
</style>
</head>
<body bgcolor=black  scroll="on">
<center><h2 style="color:red;width:460px;background-color:navy">My best photos (<<TRANSFORM(j)>>)</h2></center>
</div></center>
<center>
<div class="accordion">
    <ul>
<<m.xx>>
    </ul>
</div>
</CENTER>
<div><br><br><br></div>

 <script type="text/javascript">
      var inFullScreen = false; // flag to show when full screen

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false  ){
              makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }


       function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }


      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        inFullScreen = false;
        return;
      }
    </script>
</body>
</html>
ENDTEXT

local m.lcdest
m.lcdest=m.yrep+"yaccordeonV0.html"
Strtofile(m.myvar,m.lcdest)

&&shellexecute
Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
    STRING cOperation,;
    STRING cFileName,;
    STRING cParameters,;
    STRING cDirectory,;
    INTEGER nShowWindow

result = ShellExecute(0, "open","firefox.exe", m.lcdest,"",3)


Local oshell
oshell=Newobject("wscript.shell")
Inkey(1)
oshell.sendkeys("{F11}")
Set Defa To Addbs(Justpath(Sys(16,1)))
*quit
Retu

Function yhtmlcolor()
    *convert RGB colot to HTML color
    Lparameters xcol
    If xcol=-1
        Return .F.
    Endi

    xhtml_color=Chrtran("123456","563412",Right(Trans(m.xcol  ,"@0"),6))
    Return "#"+xhtml_color
Endfunc

*endcode

 

Vertical accordion   with a great number of images (can be also mixed with texts)
Vertical accordion   with a great number of images (can be also mixed with texts)
Vertical accordion   with a great number of images (can be also mixed with texts)
Vertical accordion   with a great number of images (can be also mixed with texts)

Vertical accordion with a great number of images (can be also mixed with texts)

II) HORIZONTAL ACCORDION

This is an horizontal web accordion with an images folder working on disk.Its html and css codes  mixed with vfp.
Added msdn API fullscreen on each image  from
https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx
You can use the fullscreen API to bring video, images, and other content to a user's full attention.
-adapted from free web horizontal accordion  css3:
http://beta.rdsign.net/article_51
i would to adapt this code to vfp ie browser (emulation ie11) but there is not well rendered (gradient problem).you can try it.

*firefox is used for viewing the result.

*2*

*Begin code
If !_vfp.StartMode=0
    On Shutdown Quit
Endi
Local m.xcolor,m.ycolor
_Screen.Visible=.T.
m.xcolor=Getcolor()
If Empty(m.xcolor) Or m.xcolor=-1
    m.xcolor=Rgb(0,230,0)
Endi
m.ycolor=yhtmlcolor(m.xcolor)
_Screen.Visible=.F.
Local m.yrep,m.yrepIM
m.yrep=Addbs(Sys(2023))      &&addbs(justpath(sys(16)))

m.yrepI=Getdir()
If Empty(m.yrepI)
    Return .F.
Endi
m.yrepI=Addbs(m.yrepI)

Local gnbre
gnbre=Adir(gabase,m.yrepI+"*.*")
If gnbre=0
    Return .F.
Endi

Local m.xx,m.yy,j
m.xx=""
j=0
For i=1 To gnbre
    If Inlist(Lower(Justext(m.yrepI+gabase(i,1))),"jpg","png","gif","bmp")
        j=j+1
        TEXT to m.yy textmerge noshow
<li>
            <a href="##"><span> -<<trans(j)+"-"+allt(juststem(gabase(i,1)))>></span></a>
            <div class="fullscreen" title="Click for fullscreen on/off  !">
            <div>
                <span style="cursor:pointer"><img src="file:///<<m.yrepI+gabase(i,1)>>" width="430" height="300"></span>
            </div>
            </div>
        </li>
        ENDTEXT
        m.xx=m.xx+m.yy+Chr(13)
    Endi
Endfor

Messagebox(Trans(j)+" images in"+m.yrepI+ " ",0+32+4096,"",1000)

Local m.myvar
TEXT to m.myvar textmerge  noshow
<html>
<head>
    <title>Horizontal Accordion vertical with  CSS3</title>
<style>
/**** reset du blogue****/
.unBlog img {
    padding: 0px;
}
/**** reset du blogue****/

.accordion  {
    font-family: Arial, Helvetica, sans-serif;
    border-right:1px solid #CCCCCC;
}

.accordion>ul>li>a {
    -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= <<m.ycolor>>, endColorstr=#74892d);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
    background: -moz-linear-gradient( center top,  <<m.ycolor>> 5%, #74892d 100%);
    background-color:#a3b75f;
    border-style:solid;
    border-color:#56661f;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:-1px -1px 0px #000000;
}

.accordion>ul>li>a:hover{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#899a4c', endColorstr='#56661f');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
    background:-moz-linear-gradient( center top, #899a4c 5%, #56661f 100% );
    color:#fff;
}

.accordion>ul>li>div {
    background-color:#fff;
    border-style:solid;
    border-color:#ccc;
}

.accordion>ul>li>div {
    border-width:1px 0;
    height:300px;
    padding:10px;
    width:430px;
}

.accordion>ul>li>a {
    border-width:0 1px 0 0;
    width:40px;
}

.accordion  {
    width=100%;
}
.accordion, .accordion>ul>li>a  {
    height:322px;
}

.accordion>ul>li {
    margin-right:-450px;
    width:491px;
    transition: margin-right 0.5s ease-in-out 0.1s;
    -moz-transition: margin-right 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-right 0.5s ease-in-out 0.1s;
    -o-transition: margin-right 0.5s ease-in-out 0.1s;
}


.accordion {overflow-x:auto;overflow-y:hidden}
.accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;}
.accordion>ul>li>div {float:left;}
.accordion>ul>li:hover {margin-right:0px;}

</style></head>
<body bgcolor=black  scroll="on">
<center><h2 style="color:red;width:460px;background-color:navy;">My best photos (<<TRANSFORM(j)>>)</h2></center>
<br><br><br><br><br>
</div></center>

<center>
<div class="accordion">
    <ul>
<<m.xx>>
    </ul>
</div>

</CENTER>
<div style ='width:10000'></div>

 <script type="text/javascript">
      var inFullScreen = false; // flag to show when full screen

      var fsClass = document.getElementsByClassName("fullScreen");
      for (var i = 0; i < fsClass.length; i++) {
        fsClass[i].addEventListener("click", function (evt) {
          if (inFullScreen == false  ){
              makeFullScreen(evt.target); // open to full screen
          } else {
            reset();
          }
        }, false);
      }

      function makeFullScreen(divObj) {
        if (divObj.requestFullscreen) {
          divObj.requestFullscreen();
        }
        else if (divObj.msRequestFullscreen) {
          divObj.msRequestFullscreen();
        }
        else if (divObj.mozRequestFullScreen) {
          divObj.mozRequestFullScreen();
        }
        else if (divObj.webkitRequestFullscreen) {
          divObj.webkitRequestFullscreen();
        }
        inFullScreen = true;
        return;
      }

      function reset() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
        inFullScreen = false;
        return;
      }

    </script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=m.yrep+"yaccordeonV0.html"
Strtofile(m.myvar,m.lcdest)
&&shellexecute
Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
    STRING cOperation,;
    STRING cFileName,;
    STRING cParameters,;
    STRING cDirectory,;
    INTEGER nShowWindow

result = ShellExecute(0, "open","firefox.exe", m.lcdest,"",3)


Local oshell
oshell=Newobject("wscript.shell")
Inkey(1)
oshell.sendkeys("{F11}")  &&initial fullscreen
Set Defa To Addbs(Justpath(Sys(16,1)))
*quit
Retu

Function yhtmlcolor()
    *convert RGB colot to HTML color
    Lparameters xcol
    If xcol=-1
        Return .F.
    Endi

    xhtml_color=Chrtran("123456","563412",Right(Trans(m.xcol  ,"@0"),6))
    Return "#"+xhtml_color
Endfunc

*Endcode

 

Horizontal accordion with a great number of images (can be also mixed with texts)
Horizontal accordion with a great number of images (can be also mixed with texts)
Horizontal accordion with a great number of images (can be also mixed with texts)

Horizontal accordion with a great number of images (can be also mixed with texts)

   III) A MIXED ACCORDION WITH TEXTS & IMAGES

This is a css3 horizontal accordion  sample with mixed texts and image
firefox is used for viewing the result.

*3*

*begin code
If !_vfp.StartMode=0
    On Shutdown Quit
Endi
Local m.yrep
m.yrep=Addbs(Sys(2023))
Local m.myvar
TEXT to m.myvar noshow
<html>
<head>
    <title>Accordéon horizontal en CSS3</title>
<style>
/**** reset du blogue****/
.unBlog img {
    padding: 0px;
}
/**** reset du blogue****/


.accordion  {
    font-family: Arial, Helvetica, sans-serif;
    border-right:1px solid #CCCCCC;
}
.accordion>ul>li>a {
    -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3b75f, endColorstr=#74892d);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
    background: -moz-linear-gradient( center top, maroon 5%, #74892d 100%);
    background-color:#a3b75f;
    border-style:solid;
    border-color:#56661f;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:-1px -1px 0px #000000;
}
.accordion>ul>li>a:hover{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#899a4c', endColorstr='#56661f');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
    background:-moz-linear-gradient( center top, maroon 5%, #56661f 100% );
    color:#fff;
}
.accordion>ul>li>div {
    background-color:#fff;
    border-style:solid;
    border-color:#ccc;
}
.accordion>ul>li>div {
    border-width:1px 0;
    height:300px;
    padding:10px;
    width:430px;
}
.accordion>ul>li>a {
    border-width:0 1px 0 0;
    width:40px;
}

.accordion  {
    width:614px;
}
.accordion, .accordion>ul>li>a  {
    height:322px;
}
.accordion>ul>li {
    margin-right:-450px;
    width:491px;
    transition: margin-right 0.5s ease-in-out 0.1s;
    -moz-transition: margin-right 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-right 0.5s ease-in-out 0.1s;
    -o-transition: margin-right 0.5s ease-in-out 0.1s;
}
.accordion {overflow:hidden;}
.accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;}
.accordion>ul>li>div {float:left;}
.accordion>ul>li:hover {margin-right:0px;}
</style>
</head>

<body bgcolor=black oncontextmenu="return false;">
<h2> CSS3 horizontal Accordion with texts and image</h2>
<div class="accordion">
    <ul>
        <li>
            <a href="##"><span>Titre 1</span></a>
            <div>
            <h3 style="font:Courier new";size:14;width:430 :height:50;color:blue;">Panneau 1</h3>
                <p style="font:batavia;size:10;width:430 :height:250;color:maroon;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
                </p>

            </div>
        </li>
        <li>
            <a href="##"><span>Titre 2</span></a>
            <div>
        <h3 style="font:Courier new";size:14;width:430 :height:50;color:blue;">Panneau 2</h3>
                <p style="font:batavia;size:10;width:430 :height:250;color:red;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
                </p>
            </div>
        </li>
        <li>
            <a href="##"><span>Titre 3</span></a>
            <div>
        <img src="http://img.over-blog-kiwi.com/1/43/54/07/20150209/ob_068977_demo5.jpg" width="430" height="300">

                <p style="font:batavia;size:10;width:430 :height:250;color:red;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
                </p>

            </div>
        </li>
        <li>
            <a href="##"><span>Titre 4</span></a>
            <div style="background-color:black">
            <center><img src="http://img.over-blog-kiwi.com/1/43/54/07/20150209/ob_78a803_fennec.png" width="100" height="100"></center>
                <h3 style="font:Courier new";size:14;width:430 :height:250;color:white;">Panneau 4</h3>
                <p style="font:batavia;size:10;width:430 :height:300;color:white;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
                </p>
            </div>
        </li>
    </ul>
</div>

</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=m.yrep+"yaccordeonV0.html"
Strtofile(m.myvar,m.lcdest)
&&shellexecute
Declare Integer ShellExecute In SHELL32.Dll Integer nWinHandle,;
    STRING cOperation,;
    STRING cFileName,;
    STRING cParameters,;
    STRING cDirectory,;
    INTEGER nShowWindow

result = ShellExecute(0, "open","firefox.exe", m.lcdest,"",3)

Local oshell
oshell=Newobject("wscript.shell")
Inkey(1)
oshell.sendkeys("{F11}")  &&initial fullscreen
Set Defa To Addbs(Justpath(Sys(16,1)))
*quit
Retu

*end code

 

can mix texts, images,videos and another web objects and even build menus with these accordions.
can mix texts, images,videos and another web objects and even build menus with these accordions.
can mix texts, images,videos and another web objects and even build menus with these accordions.
can mix texts, images,videos and another web objects and even build menus with these accordions.

can mix texts, images,videos and another web objects and even build menus with these accordions.

Relative to IE11 rendering problem evoqued above:

in the css class .accordion>ul>li>a  you can add this line missed for rendering IE10 and above

background: -ms-linear-gradient(top, <<m.ycolor>> 0%, #56661f 100%);

adding this line twice on css code.

this is a complet code for a vfp ie browser.the css is some modified to work with implementing ie background and  barre height.

The div image fullscreen is not yet perfect (its not a real fullscreen as firefox does).Its better on Firefox.

 

 

 

*4*

*begin code
Publi m.yrep0
m.yrep0=Addbs(Justpath(Sys(16,1)))
Set Defa To (yrep0)

Publi yform
yform=Newobject("browser_ie")
yform.Show
Read Events
Retu
*
Define Class "browser_ie" As Form
    Height = 539
    Width = 832
    ShowWindow = 2
    AutoCenter = .T.
    Caption = "Vertical accordion with an images folder on form "
    Name = "Form1"

    Add Object olecontrol1 As OleControl With ;
        Oleclass="shell.explorer.2",;
        Top = 0, ;
        Left = 0, ;
        Height = 540, ;
        Width = 829, ;
        Anchor = 15, ;
        Name = "Olecontrol1"

    Procedure yhtmlcolor
        *convert RGB colot to HTML color
        Lparameters xcol
        If xcol=-1
            Return .F.
        Endi
        xhtml_color=Chrtran("123456","563412",Right(Trans(m.xcol  ,"@0"),6))
        Return "#"+xhtml_color
    Endproc

    Procedure Init
        Local m.xcolor
        m.xcolor=Getcolor()
        If Empty(m.xcolor) Or m.xcolor=-1
            m.xcolor=Rgb(0,230,0)
        Endi
        m.ycolor=Thisform.yhtmlcolor(m.xcolor)

        Local m.yrep,m.yrepI
        m.yrep=Addbs(Sys(2023))   && in temp folder
        m.yrepI=Getdir()
        If Empty(m.yrepI)
            Return .F.
        Endi
        m.yrepI=Addbs(m.yrepI)

        Local gnbre
        gnbre=Adir(gabase,m.yrepI+"*.*")
        If gnbre=0
            Return .F.
        Endi

        Local m.xx,m.yy,j
        m.xx=""
        j=0
        For i=1 To gnbre
            If Inlist(Lower(Justext(m.yrepI+gabase(i,1))),"jpg","png","gif","bmp")
                j=j+1
                TEXT to m.yy textmerge noshow
        <li>
                    <a href="##"><span> -<<trans(j)+"-"+allt(juststem(gabase(i,1)))>></span></a>
                    <div class="fullScreen"
  title="Click for fullscreen on/off  !">
                    <div>
                        <span style="cursor:pointer"><img src="file:///<<m.yrepI+gabase(i,1)>>" width="430" height="300"></span>
                    </div>
                    </div>
                </li>
                ENDTEXT
                m.xx=m.xx+m.yy+Chr(13)
            Endi
        Endfor

        TEXT to m.yy textmerge noshow
        <li>
                    <a href="##"><span> -<<"- Blank image">></span></a>
                    <div>
                        <img src=""" width="430" height="300">
                    </div>
                </li>
        ENDTEXT
        m.xx=m.xx+m.yy+Chr(13)  && just for view real image before
        m.xx=m.xx+m.yy+Chr(13)
        m.xx=m.xx+m.yy+Chr(13)

        Messagebox(Trans(j)+" images in"+m.yrepI+ " ",0+32+4096,"",1200)
        Local m.myvar
        TEXT to m.myvar textmerge  noshow
        <html>
        <head>
            <title>Vertical Accordion vertical with  CSS3</title>
        <style>

body {
    background-image: url("http://img.over-blog-kiwi.com/1/43/54/07/20150213/ob_c13c6f_sam-0962.JPG");
   
   background-attachment: fixed;
      }

        /* reset normal style*/

        .unBlog img {
            padding: 0px;
        }

        /* reset normal style*/
        .accordeon {
            width:430px;
            height:100%;
            overflow:hidden;
        }
        .accordion>ul>li>div {
            background-color:#fff;
            border-style:solid;
            border-color:#ccc;
            border-width:1px 0;
            height:300px;
            padding:10px;
            width:430px;
            margin-top: -296px;
        }

        .accordion>ul>li>div {
            transition: margin-top 0.5s ease-in-out 0.1s;
            -moz-transition: margin-top 0.5s ease-in-out 0.1s;
            -webkit-transition: margin-top 0.5s ease-in-out 0.1s;
            -o-transition: margin-top 0.5s ease-in-out 0.1s;
        }

        .accordion>ul>li:hover>div {margin-top:0px;}

        .accordion>ul>li>a {
            -moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
            -webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
            box-shadow:inset 1px 0px 0px 0px #C4E1B0;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=<<m.ycolor>>, endColorstr=#74892d);
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
            background: -moz-linear-gradient( center top, <<m.ycolor>> 5%, #74892d 100%);
            background: -ms-linear-gradient(top, <<m.ycolor>> 0%, #56661f 100%);
            color:#FFFFFF;
            font-size:15px;
            font-weight:bold;
            text-decoration:none;
            text-shadow:-1px -1px 0px #000000;
            height:27px;
            width:450px;
            float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;
        }
        .accordion>ul>li>a:hover{
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<<m.ycolor>>', endColorstr='#56661f');
            background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
            background:-moz-linear-gradient( center top,<<m.ycolor>> 5%, #56661f 100% );
            background: -ms-linear-gradient(top, <<m.ycolor>> 0%, #56661f 100%);
            color:#fff;
        }
        .accordion>ul {margin:0;padding:0;list-style:none;width:430px;}
        .accordion>ul>li {float:left;overflow:hidden;width:450px;}
        .accordion > ul > li > a > span {
            bottom: 5px;
            display: block;
            left: 12px;
            position: absolute;
            white-space: nowrap;
            width: 440px;
        }
        </style>
        </head>
        <body bgcolor=black  scroll="on" oncontextmenu="return false;">
        <center><h2 style="color:red;width:460px;background-color:navy">My best photos (<<TRANSFORM(j)>>)</h2></center>
        </div></center>
        <center>
        <div class="accordion">
            <ul>
        <<m.xx>>
            </ul>
        </div>
        </CENTER>
        <div><br><br><br></div>

         <script type="text/javascript">
              var inFullScreen = false; // flag to show when full screen

              var fsClass = document.getElementsByClassName("fullScreen");
              for (var i = 0; i < fsClass.length; i++) {
                fsClass[i].addEventListener("click", function (evt) {
                  if (inFullScreen == false  ){
                      makeFullScreen(evt.target); // open to full screen
                  } else {
                    reset();
                  }
                }, false);
              }


               function makeFullScreen(divObj) {
                      if (divObj.requestFullscreen) {
                  divObj.requestFullscreen();
                }
                else if (divObj.msRequestFullscreen) {
                  divObj.msRequestFullscreen();

                }
                else if (divObj.mozRequestFullScreen) {
                  divObj.mozRequestFullScreen();
                }
                else if (divObj.webkitRequestFullscreen) {
                  divObj.webkitRequestFullscreen();
                }
                inFullScreen = true;
                return;
              }


              function reset() {
                if (document.exitFullscreen) {
                  document.exitFullscreen();
                }
                else if (document.msExitFullscreen) {
                  document.msExitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                  document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                  document.webkitCancelFullScreen();
                }
                inFullScreen = false;
                return;
              }
            </script>
        </body>
        </html>
        ENDTEXT
        Local m.lcdest
        m.lcdest=m.yrep+"yaccordeonV0.html"
        Strtofile(m.myvar,m.lcdest)
        Thisform.olecontrol1.Navigate(m.lcdest)
    Endproc

    Procedure Destroy
        Set Defa To (yrep0)
        Clea Events
    Endproc

    Procedure olecontrol1.Init
        This.silent=.T.
    Endproc
Enddefine
*

*End code

 

The second image is made as background in the css code and its fixed(dont scroll).
The second image is made as background in the css code and its fixed(dont scroll).
The second image is made as background in the css code and its fixed(dont scroll).

The second image is made as background in the css code and its fixed(dont scroll).

Click on code to select [then copy] -click outside to deselect

*5*
*run vfp9.exe as administrator to avoid some known problems
*mousemove on accordeon bars to move its panels

clea all
set safe off
publi m.yrep
m.yrep=addbs(justpath(sys(16,1)))
set defa to (yrep)

*download 5 images from web for demo purpose only
Declare Integer URLDownloadToFile In urlmon.Dll Integer pCaller, String szURL, String szFileName, Integer dwReserved, Integer lpfnCB
Declare Integer DeleteUrlCacheEntry In wininet String lpszUrlName
Declare integer Sleep in kernel32 integer
for i=1 to 5
do case
case i=1
lcDownloadURL = "http://findicons.com/files/icons/2075/windows_system_logo/128/windows_982000.png"
lcDownloadLoc = "yImage1.png"
case i=2
lcDownloadURL = "http://findicons.com/files/icons/1008/quiet/128/windows_update.png"
lcDownloadLoc = "yImage2.png"
case i=3
lcDownloadURL = "http://findicons.com/files/icons/1938/xp_icandy_1/128/windows_folder.png"
lcDownloadLoc = "yImage3.png"
case i=4
lcDownloadURL = "http://findicons.com/files/icons/76/icandy_junior/128/folder_yellow_windows.png"
lcDownloadLoc = "yImage4.png"
case i=5
lcDownloadURL = "http://findicons.com/files/icons/1253/flurry_extras/128/windows_alt.png"
lcDownloadLoc = "yImage5.png"
endcase

lnResult = DeleteUrlCacheEntry(lcDownloadURL)
lnResult = URLDownloadToFile(0, lcDownloadURL, lcDownloadLoc , 0,0)
If lnResult = 0 Then
wait window "Download  yimage "+trans(i)+" Complete" nowait
*Else
*!*        Messagebox("Download fails")
Endif
endfor
sleep(3000)
**************************************************************************

create cursor ycurs (title c(20),content m)
text to m.ytext noshow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
endtext

for i=1 to 4  &&4 panels
insert into ycurs values ("this is the title"+trans(i),trans(i)+chr(13)+chr(10)+m.ytext)
endfor
*brow

gnbre=adir(gabase,m.yrep+"yimage*.png")

rand(-1)
sele ycurs
xx=""
scan
text to m.uu textmerge noshow
<li>
<a href="##"><span style="color:red;"> <<title>></span></a>
<div>
<p style="color:<< ycolor()>>">
<<content>></p>
<center><img src="<<m.yrep+gabase(recno(),1)>>" width="64" height="64"><br>
<a href="http://yousfi.over-blog.com/">my Blog</a>
</center>

</div>
</li>
<li>
endtext
m.xx=m.xx+m.uu
endscan

_cliptext=m.xx


local m.myvar
text to m.myvar textmerge noshow

<html>
<head>
	<title>CSS3 horizontal Accordion</title>
<style>
/**** reset du blogue****/
.unBlog img {
    padding: 0px;
}
/**** reset du blogue****/
body {background-color:black;}

.accordion  {
	font-family: Arial, Helvetica, sans-serif;
	border-right:1px solid #CCCCCC;
}

.accordion>ul>li>a {
	-moz-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
	-webkit-box-shadow:inset 1px 0px 0px 0px #C4E1B0;
	box-shadow:inset 1px 0px 0px 0px #C4E1B0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3b75f, endColorstr=#74892d);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a3b75f), color-stop(1, #74892d) );
	background: -moz-linear-gradient( center top, #a3b75f 5%, #74892d 100%);
	background-color:#a3b75f;
	border-style:solid;
	border-color:#56661f;
	color:#FFFFFF;
	font-size:15px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:-1px -1px 0px #000000;
}

.accordion>ul>li>a:hover{
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#899a4c', endColorstr='#56661f');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #899a4c), color-stop(1, #56661f) );
	background:-moz-linear-gradient( center top, #899a4c 5%, #56661f 100% );
	color:#fff;
}

.accordion>ul>li>div {
	background-color:#fff;
	border-style:solid;
	border-color:#ccc;
}

.accordion>ul>li>div {
	border-width:1px 0;
	height:300px;
	padding:10px;
	width:430px;
}

.accordion>ul>li>a {
	border-width:0 1px 0 0;
	width:40px;
}



.accordion  {	
	width:614px;
}

.accordion, .accordion>ul>li>a  {	
	height:322px;
}

.accordion>ul>li {
	margin-right:-450px;
	width:491px;
	transition: margin-right 0.5s ease-in-out 0.1s;
    -moz-transition: margin-right 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-right 0.5s ease-in-out 0.1s;
    -o-transition: margin-right 0.5s ease-in-out 0.1s;
}


.accordion {overflow:hidden;}
.accordion>ul {margin:0;padding:0;list-style:none;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;margin:0;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{
	-moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
	-ms-writing-mode:lr-bt;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie>li>a>span {cursor:pointer;width:auto;}
.accordion>ul>li>div {float:left;}
.accordion>ul>li:hover {margin-right:0px;}

</style>	
	
</head>
<body >
<center><h2  style="color:purple;background-color:cyan;width:700px;">CSS3 horizontal Accordion</h2><br></center>
<center>
<div class="accordion">
	<ul>
		<<m.xx>>
	</ul>
</div>
</center>
</body>
</html>
endtext


declare integer BringWindowToTop in user32 integer

local m.lcdest
m.lcdest=addbs(sys(2023))+"yaccordionH.html"
strtofile(m.myvar,m.lcdest)

*oo=newObject("hyperlink")
*oo.navigateto(m.lcdest)
apie=newObject("internetexplorer.application")
with apie
.navigate(m.lcdest)
.toolbar=0
.menubar=0
.statusbar=0
.width=800
.height=600
.left=(sysmetric(1)-.width)/2
.top =(sysmetric(2)-.height)/2
bringWindowToTop(.hwnd)
.visible=.t.
endwith

retu


function ycolor() &&convert rgb to html color
tncolor=rgb(255*rand(),255*rand(),255*rand())   &&random color
LOCAL loColor
loColor = CREATEOBJECT("Empty")
ADDPROPERTY(loColor, "nR", BITAND(tnColor, 0xFF))
ADDPROPERTY(loColor, "nG", BITAND(BITRSHIFT(tnColor, 8), 0xFF))
ADDPROPERTY(loColor, "nB", BITAND(BITRSHIFT(tnColor, 16), 0xFF))
ADDPROPERTY(loColor, "cHTMLcolor", STRTRAN("#" + ;
		TRANSFORM(loColor.nR, "@0") +   ;
		TRANSFORM(loColor.nG, "@0") +   ;
		TRANSFORM(loColor.nB, "@0"), "0x000000", "" ))
RETURN loColor.chtmlColor
endfunc

 

Web accordions vertical &amp; horizontal

Click on code to select [then copy] -click outside to deselect


*6*  created on sunday 26 of november 2017
*with this web accordion can type in memo fields the texts wanted to read in the browser (and modify also).the goal s to view as web accorsdion
*if refering any accordionn button with an unic Id, and text div with even an Id,can interact easily from VFP with this objects.
*to build a solid reminder make a permanent table instead this cursor (for demo only).
*the DOM styles can be found at https://www.w3schools.com/jsref/dom_obj_style.asp  its easy to customize these styles from VFP with DOM notation.
*note: not all styles work with VFP (must try always with document object who is the top of DOM logic).
*working between vfp and DOM.

Publi oform
oform=Newobject("yReminder")
oform.Show
Read Events
Retu
*
Define Class yReminder As Form
	Height = 683
	Width = 1241
	ShowWindow = 2
	AutoCenter = .T.
	Caption = "Web accordion demo with DOM styles"
	MinWidth = 1234
	BackColor = Rgb(212,210,208)
	ShowTips=.T.
	Name = "form1"


	Add Object commandgroup1 As CommandGroup With ;
		AutoSize = .T., ;
		ButtonCount = 12, ;
		Anchor = 768, ;
		BackStyle = 0, ;
		BorderStyle = 0, ;
		Value = 1, ;
		Height = 37, ;
		Left = 4, ;
		Top = -4, ;
		Width = 1229, ;
		Name = "Commandgroup1", ;
		Command1.AutoSize = .F., ;
		Command1.Top = 5, ;
		Command1.Left = 5, ;
		Command1.Height = 27, ;
		Command1.Width = 139, ;
		Command1.Caption = "Accordion colors", ;
		Command1.Name = "Command1", ;
		Command2.AutoSize = .F., ;
		Command2.Top = 5, ;
		Command2.Left = 147, ;
		Command2.Height = 27, ;
		Command2.Width = 84, ;
		Command2.Caption = "Texts fonts", ;
		Command2.Name = "Command2", ;
		Command3.AutoSize = .F., ;
		Command3.Top = 5, ;
		Command3.Left = 234, ;
		Command3.Height = 27, ;
		Command3.Width = 115, ;
		Command3.Caption = "texts Backcolors", ;
		Command3.Name = "Command3", ;
		Command4.AutoSize = .F., ;
		Command4.Top = 5, ;
		Command4.Left = 352, ;
		Command4.Height = 27, ;
		Command4.Width = 84, ;
		Command4.Caption = "Texts colors", ;
		Command4.Name = "Command4", ;
		Command5.AutoSize = .T., ;
		Command5.Top = 5, ;
		Command5.Left = 439, ;
		Command5.Height = 27, ;
		Command5.Width = 137, ;
		Command5.Caption = "Text border+transition", ;
		Command5.Name = "Command5", ;
		Command6.AutoSize = .F., ;
		Command6.Top = 5, ;
		Command6.Left = 579, ;
		Command6.Height = 27, ;
		Command6.Width = 84, ;
		Command6.Caption = "Text shadow", ;
		Command6.Name = "Command6", ;
		Command7.AutoSize = .F., ;
		Command7.Top = 5, ;
		Command7.Left = 666, ;
		Command7.Height = 27, ;
		Command7.Width = 84, ;
		Command7.Caption = "Wordwrap", ;
		Command7.Name = "Command7", ;
		Command8.AutoSize = .F., ;
		Command8.Top = 5, ;
		Command8.Left = 753, ;
		Command8.Height = 27, ;
		Command8.Width = 84, ;
		Command8.Caption = "Font syles", ;
		Command8.Name = "Command8", ;
		Command9.AutoSize = .F., ;
		Command9.Top = 5, ;
		Command9.Left = 840, ;
		Command9.Height = 27, ;
		Command9.Width = 84, ;
		Command9.Caption = "Font normal", ;
		Command9.Name = "Command9", ;
		Command10.AutoSize = .F., ;
		Command10.Top = 5, ;
		Command10.Left = 927, ;
		Command10.Height = 27, ;
		Command10.Width = 91, ;
		Command10.Caption = "Text rotation", ;
		Command10.Name = "Command10", ;
		Command11.AutoSize = .T., ;
		Command11.Top = 5, ;
		Command11.Left = 1021, ;
		Command11.Height = 27, ;
		Command11.Width = 109, ;
		Command11.Caption = "Expand/collapse", ;
		Command11.Name = "Command11", ;
		Command12.AutoSize = .F., ;
		Command12.Top = 5, ;
		Command12.Left = 1133+2, ;
		Command12.Height = 27, ;
		Command12.Width = 91, ;
		Command12.Caption = "Initial state", ;
		Command12.Name = "Command12"

	Add Object yshp1 As Shape With;
		left=10,;
		top=40,;
		width=13,;
		height=13,;
		curvature=99,;
		backcolor=Rgb(0,255,0),;
		mousepointer=15,;
		tooltiptext="gradient color1",;
		name="yshp1"

	Add Object yshp2 As Shape With;
		left=10,;
		top=58,;
		width=13,;
		height=13,;
		curvature=99,;
		backcolor=255,;
		mousepointer=15,;
		tooltiptext="gradient color2",;
		name="yshp2"

	Add Object yshp3 As Shape With;
		left=10,;
		top=58+17,;
		width=13,;
		height=13,;
		curvature=99,;
		backcolor=Rgb(255,255,255),;
		mousepointer=15,;
		tooltiptext="initial state",;
		name="yshp3"

	Add Object olecontrol1 As OleControl With ;
		oleclass="Shell.explorer.2", ;
		Top = 38, ;
		Left = 52, ;
		Height = 622, ;
		Width = 1130, ;
		Anchor = 15, ;
		Name = "Olecontrol1"

	Procedure yshp1.Click
		Local m.xcolor
		m.xcolor=Getcolor()
		If m.xcolor=-1
			Return .F.
		Endi
		This.BackColor=m.xcolor
		Thisform.ybuild()
	Endproc

	Procedure yshp2.Click
		Local m.xcolor
		m.xcolor=Getcolor()
		If m.xcolor=-1
			Return .F.
		Endi
		This.BackColor=m.xcolor
		Thisform.ybuild()
	Endproc

	Procedure yshp3.Click
		Thisform.yshp1.BackColor=Rgb(0, 149, 255)
		Thisform.yshp2.BackColor=Rgb(0,94,255)
		Thisform.ybuild()
	Endproc

	Procedure Load
		Create Cursor ycurs (xtitle c(50),xtext m)
		Local m.myvar
		TEXT to m.myvar noshow
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus eget lorem feugiat
		fermentum nec a turpis. Phasellus purus sem, mollis ac posuere eget, ornare vel orci. Sed ac rutrum
		nulla. Aenean ultrices eget lectus eu efficitur. In hac habitasse platea dictumst. Nulla in iaculis nisi.
		Nullam et pulvinar tellus. Donec arcu dui, efficitur a odio non, porta congue dolor. Aenean viverra
		auctor sagittis. Integer lobortis dignissim auctor. Proin et volutpat massa.
		ENDTEXT
		For i=1 To 10
			Insert Into ycurs Values ("My chapter title "+Trans(i)+" goes here.",m.myvar)
		Endfor
		*brow
	Endproc

	Procedure Destroy
		Clea Events
	Endproc

	Procedure olecontrol1.Init
		This.silent=.T.
		Thisform.yshp1.BackColor=Rgb(0, 149, 255)
		Thisform.yshp2.BackColor=Rgb(0,94,255)
		Thisform.ybuild()
	Endproc

	Procedure ybuild
		Local m.x
		Sele ycurs
		m.x=""
		Scan
			i=Recno()
			m.x=m.x+'<button class="accordion"  id=yb'+Trans(i)+'><center><b>'+Allt(xtitle)+'</b></center></button><div class="panel" id="dyb'+Trans(i)+'">  <p>'+ Trans(i)+". "+Allt(xtext)+"</p></div></div><br>"+Chr(13)
		Endscan

		Local m.myvar
		TEXT to m.myvar textmerge noshow
		<!DOCTYPE html>
		<html>
		<head>
		<meta http-equiv="x-ua-compatible" content="ie=edge" />
		<style>
		body {background:<<rgb2html(thisform.backcolor)>>}
		button.accordion {
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;

    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, <<rgb2html(thisform.yshp1.backcolor)>>), color-stop(0.9, <<rgb2html(thisform.yshp2.backcolor)>>) );
    background: -ms-linear-gradient(top, <<rgb2html(thisform.yshp1.backcolor)>>, <<rgb2html(thisform.yshp2.backcolor)>>); /* IE 11 */
     background:-moz-linear-gradient( center top, <<rgb2html(thisform.yshp1.backcolor)>> 5%, <<rgb2html(thisform.yshp2.backcolor)>> 80% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='<< rgb2html(thisform.yshp1.backcolor)>>', endColorstr='<< rgb2html(thisform.yshp2.backcolor)>>');
    background-color:<<rgb2html(thisform.yshp1.backcolor)>>opacity:0.9;

     -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #004eb3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 16px;
    text-decoration:none;
    text-shadow:1px 1px 0px #292929;
    cursor:pointer;
	width: 80%;
	border: none;
	text-align: left;
	outline: none;
	transition: 0.4s;
		}

		button.accordion.active, button.accordion:hover {
		    background:-webkit-gradient( linear, left top, left top, color-stop(0.05, #005eff), color-stop(1, #0055A7) );
            background:-moz-linear-gradient( center top, #005eff 5%, #0055A7100% );
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#005eff', endColorstr='#0055A7');
           background-color: rgba(45,45,45,0.8) ;
	  	}


		div.panel {
		    padding: 0 18px;
		    display: none;
		    background-color: rgb(255,255,255,0.8);
		    color:maroon;
		    width:80%;
		}

		div.panel:hover {
		    background-color: coral;
		    font-size:110%;
		    padding: 5px;
		    border-radius: 15px;
		}
		h2 { color:navy;}
		</style>
		</head>
		<body>
		<center>
		<h2>My Reminder as stylized accordion</h2>

		<<m.x>>
		</center>
		<script  id="yscript">
		var acc = document.getElementsByClassName("accordion");
		var i;
		for (i = 0; i < acc.length; i++) {
		    acc[i].onclick = function(){
		        this.classList.toggle("active");
		        var panel = this.nextElementSibling;
		        if (panel.style.display === "block") {
		            panel.style.display = "none";
		        } else {
		            panel.style.display = "block";
		        }
		    }
		}
		</script>

		</body>
		</html>
		ENDTEXT
		_Cliptext=m.myvar

		With Thisform.olecontrol1
			.Navigate("about:blank")
			Inke(1)
			With .Document
				.Open()
				.Write(m.myvar)
				.Close()
			Endwith
		Endwith
	Endproc

	Procedure commandgroup1.Init
		With This
			.AutoSize=.T.
			.BackStyle=0
			.BorderStyle=1
			.SetAll("backcolor",Rgb(0,125,0))
			.SetAll("mousepointer",15)
			.SetAll("fontbold",.T.)
			.Left=(.Parent.Width-.Width)/2
			.Top=1
		Endwith
	Endproc

	Procedure commandgroup1.Command1.Click
		Sele ycurs
		For i=1 To Reccount()
			Thisform.olecontrol1.Document.getElementById("yb"+Trans(i)).Style.backgroundColor=Eval("rgb("+Trans(255*Rand())+","+Trans(255*Rand())+","+Trans(255*Rand())+')')
			Inke(0.1)
		Endfor
	Endproc

	Procedure commandgroup1.Command2.Click
		Sele ycurs
		For i=1 To Reccount()
			Thisform.olecontrol1.Document.getElementById("dyb"+Trans(i)).Style.fontFamily=Iif(Mod(i,2)=0,"Segoe ui script","Impact,Charcoal,sans-serif")
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command3.Click
		Sele ycurs
		Local m.x
		For i=1 To Reccount()
			m.x="rgb("+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+')'
			Thisform.olecontrol1.Document.getElementById("dyb"+Trans(i)).Style.backgroundColor=Eval("rgb("+Trans(255*Rand())+","+Trans(255*Rand())+","+Trans(255*Rand())+')')
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command4.Click
		Sele ycurs
		Local m.x
		For i=1 To Reccount()
			m.x="rgb("+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+')'
			Thisform.olecontrol1.Document.getElementById("dyb"+Trans(i)).Style.Color=Eval("rgb("+Trans(255*Rand())+","+Trans(255*Rand())+","+Trans(255*Rand())+')')
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command5.Click
		Rand(-1)
		Local m.x
		For i=1 To Reccount()
			m.x="thick solid rgb("+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+","+Trans(255*Rand(),'999')+')'
			Local m.y As Object
			m.y=Thisform.olecontrol1.Document
			Y.getElementById("dyb"+Trans(i)).Style.Border=m.x    &&set  border  with style
			Y.getElementById("dyb"+Trans(i)).Style.boxShadow = "1px 1px 1px black "   &&add a box shadow
			Y.getElementById("dyb"+Trans(i)).Style.transition = "all 1.5s"  &&set transition 2s when mouseover div
			Y.getElementById("dyb"+Trans(i)).Style.textShadow = "1px 1px 1px #ff0000, 2px 2px 1px #0000ff"
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command6.Click
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document
		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.textShadow = "1px 1px 1px #ff0000, 1px 1px 1px rgba(45,45,45,0.8)"
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command7.Click
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document
		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.WordWrap = "break-word"  &&Allow long words to be able to break and wrap onto the next line
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command8.Click
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document
		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.textTransform =Iif(Mod(i,2)=0, "capitalize","lowercase")
			Y.getElementById("dyb"+Trans(i)).Style.fontStyle     =Iif(Mod(i,2)=0, "italic","normal")
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command9.Click
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document
		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.fontStyle ="normal"
			Y.getElementById("dyb"+Trans(i)).Style.textTransform ="initial"
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()
	Endproc

	Procedure commandgroup1.Command10.Click
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document

		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.Transform = "rotate(10deg)"
			Inke(0.1)
		Endfor
		This.Parent.Command11.Click()

		Inke(2)

		For i=1 To Reccount()
			Y.getElementById("dyb"+Trans(i)).Style.Transform = "rotate(0deg)"
			Inke(0.1)
		Endfor
	Endproc


	Procedure commandgroup1.Command11.Click
		Sele ycurs
		Local m.y As Object
		m.y=Thisform.olecontrol1.Document
		For i=1 To Reccount()
			m.y.getElementById("yb"+Trans(i)).Click(.T.)
			Inke(0.1)
		Endfor
	Endproc

	Procedure commandgroup1.Command12.Click
		Thisform.olecontrol1.Init()
	Endproc

Enddefine
*
*-- EndDefine: yReminder

Function rgb2html
	Lparameters tnColor
	Local loColor
	loColor = Createobject("Empty")
	AddProperty(loColor, "nR", Bitand(tnColor, 0xFF))
	AddProperty(loColor, "nG", Bitand(Bitrshift(tnColor, 8), 0xFF))
	AddProperty(loColor, "nB", Bitand(Bitrshift(tnColor, 16), 0xFF))
	AddProperty(loColor, "cHTMLcolor", Strtran("#" + ;
		TRANSFORM(loColor.nR, "@0") +   ;
		TRANSFORM(loColor.nG, "@0") +   ;
		TRANSFORM(loColor.nB, "@0"), "0x000000", "" ))
	Return loColor.cHTMLcolor
Endfunc


can put a  big  quantity of texts stored in vfp memo field and  in small collapsible area.
can put a  big  quantity of texts stored in vfp memo field and  in small collapsible area.
can put a  big  quantity of texts stored in vfp memo field and  in small collapsible area.

can put a big quantity of texts stored in vfp memo field and in small collapsible area.

To be informed of the latest articles, subscribe:
Comment on this post