Hello everyone and thanks for taking your time to check what I may forget or do wrong in the code.
I am currently trying to code an own element creation of my own. It is quite simple in its design. There are 4 elements (our services) that when clicked will collapse/extend with the fade effect. The problem that I can’t figure out how to solve is the following:
When I click the container it does “all” that it should. Only thing is that it doesn’t use the fade effect on the first load. It shows it when I “hide/collapse” it and if I “show/extend” it again. Just the first time it loads it doesn’t show the “opening-fade”.
Here is the code I am using at the moment. Please apologize if it looks a bit messy ^^:
//FadeOptions:
let fadeOptions = {
“duration” : 100
};
let fadeOptions2 = {
“duration” : 1500
};
//Immigration:
export function VisaBox_click ( event ) {
$w ( ‘#SectionOverviewService’ ). collapse ();
$w ( ‘#SectionOverviewService’ ). hide ( “fade” , fadeOptions2 );
$w ( ‘#VisaSection’ ). expand ();
$w ( ‘#VisaSection’ ). show ( “fade” , fadeOptions2 );
}
export function VisaBox_mouseIn ( event ) {
$w ( ‘#VisaConsultation’ ). show ( “fade” , fadeOptions );
}
export function VisaBox_mouseOut ( event ) {
$w ( ‘#VisaConsultation’ ). hide ( “fade” , fadeOptions );
}
export function Visabuttoncollapse_click ( event ) {
$w ( ‘#VisaSection’ ). collapse ();
$w ( “#VisaSection” ). hide ( “fade” , fadeOptions2 );
$w ( ‘#SectionOverviewService’ ). expand ();
$w ( “#SectionOverviewService” ). show ( “fade” , fadeOptions2 );
}
//Business
export function BCBox_click ( event ) {
$w ( ‘#SectionOverviewService’ ). collapse ();
$w ( ‘#SectionOverviewService’ ). hide ( “fade” , fadeOptions2 );
$w ( ‘#BusinessConsultingSection’ ). expand ();
$w ( ‘#BusinessConsultingSection’ ). show ( “fade” , fadeOptions2 );
}
export function BCBox_mouseIn ( event ) {
$w ( ‘business’ ). show ( “fade” , fadeOptions );
}
export function BCBox_mouseOut ( event ) {
$w ( ‘business’ ). hide ( “fade” , fadeOptions );
}
export function BusinessButtonCollapse_click ( event ) {
$w ( ‘#BusinessConsultingSection’ ). collapse ();
$w ( “#BusinessConsultingSection” ). hide ( “fade” , fadeOptions2 );
$w ( ‘#SectionOverviewService’ ). expand ();
$w ( “#SectionOverviewService” ). show ( “fade” , fadeOptions2 );
}
//RealEstate
export function REBox_click ( event ) {
$w ( ‘#SectionOverviewService’ ). collapse ();
$w ( ‘#SectionOverviewService’ ). hide ( “fade” , fadeOptions2 );
$w ( ‘#RealEstateSection’ ). expand ();
$w ( ‘#RealEstateSection’ ). show ( “fade” , fadeOptions2 );
}
export function REBox_mouseIn ( event ) {
$w ( ‘#RealEstate’ ). show ( “fade” , fadeOptions );
}
export function REBox_mouseOut ( event ) {
$w ( ‘#RealEstate’ ). hide ( “fade” , fadeOptions );
}
export function RealEstateButtonCollapse_click ( event ) {
$w ( ‘#RealEstateSection’ ). collapse ();
$w ( “#RealEstateSection” ). hide ( “fade” , fadeOptions2 );
$w ( ‘#SectionOverviewService’ ). expand ();
$w ( “#SectionOverviewService” ). show ( “fade” , fadeOptions2 );
}
//InternationalEducation
export function IntEduBox_click ( event ) {
$w ( ‘#SectionOverviewService’ ). collapse ();
$w ( ‘#SectionOverviewService’ ). hide ( “fade” , fadeOptions2 );
$w ( ‘#InternationalEducationSection’ ). expand ();
$w ( ‘#InternationalEducationSection’ ). show ( “fade” , fadeOptions2 );
}
export function IntEduBox_mouseIn ( event ) {
$w ( ‘#InternationalEducation’ ). show ( “fade” , fadeOptions );
}
export function IntEduBox_mouseOut ( event ) {
$w ( ‘#InternationalEducation’ ). hide ( “fade” , fadeOptions );
}
export function InternationalEducationButtonCollapse_click ( event ) {
$w ( ‘#InternationalEducationSection’ ). collapse ();
$w ( “#InternationalEducationSection” ). hide ( “fade” , fadeOptions2 );
$w ( ‘#SectionOverviewService’ ). expand ();
$w ( “#SectionOverviewService” ). show ( “fade” , fadeOptions2 );
}
Thank you very much in advance for your kind help, tricks and walkthroughs.