View Source

<h1><span class="heading-subtitle">User journey</span>Key steps in the once only journey</h1>
<p class="lead" style="max-width: 840px; margin-bottom: 60px;">An overview of the seven steps in the Once-Only Technical System (OOTS) journey.</p>

<div><ul>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+1+Authentication">1. Authentication</a></div></li>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+2+Evidence+Location">2. Evidence location</a></div></li>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+3+Evidence+Request">3. Evidence request</a></div></li>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+5+Preview">5. Preview</a></div></li>
<li><div class="icon-checked"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/ico-check_guidance-pages.svg" alt=""/><div></div></span><a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+6+Evidence+Response">6. Evidence response</a></div></li>
<li><div class="icon-plus-vertical_line"><span><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/check_box.svg" alt=""/><div></div></span><a>7. Submission</a></div>
<ul class="subOptions">
<li data-index="1" class="active">Submit the form</li>
</ul>
</li>
</ul></div>

<h3>7. Submit procedure for processing</h3>
<p>User completes submits their procedural form</p>

<div id="tab-one" class="accordion-tab active" data-index="1"><h5>User submits their form</h5><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/chevron.svg" alt="up arrow"/>

<p>
The user has completed the once only part of the procedure and can now provide additional information if required and submit their procedure for processing.
</p>

<img class="playGIF"src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/616400226/illu-71-submit-form.gif" alt=""/>

<a class=""><span class=""></span></a><a class=""><span class=""></span></a>

</div><hr>

<a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/User+Journey+-+Step+6+Evidence+Response" class="btn ghost"><span class="ico-cta-backward"></span><span>Previous step</span></a>

@media screen and (max-width: 518px) {
	.accordion-content-footer { display: none!important;}
	.accordion-content-footer p { flex-direction: column; }
	.previous-tab { justify-content: flex-start!important; }
	.next-tab { justify-content: flex-end!important; }
	.playGIF { min-width: 161px!important; }
}

@media screen and (max-width: 768px) {

  .active .accordion-content-card { justify-content: start!important; }
}

@media screen and ( max-width: 945px) {
	.accordion-content-body { flex-direction: column; }
	.accordion-content-card { justify-content: flex-start!important; padding-left: 0px!important;}
}

@media screen and (max-width: 1170px) {
	#guidance_navigation { display: none!important;}
	#guidance_navigation + div { display: none; }
}
/*
@media screen and ( min-width: 1171px ) and ( max-height: 850px ) {
		#guidance_navigation { position: sticky!important; top:0; left:none; }
		#guidance_navigation + div { width: 0px!important; }
}
*/

@media screen and (max-width: 1330px) {
	#guidance_navigation { width: 16.6%!important; }
}

@media screen and (min-width: 2200px) {
 #guidance > div > div > div:nth-child(2) { display: none; }
}

#guidance_accordion h3 { font-size: 24px!important; }
#guidcance_accordion > p:nth-child(3) { font-size: 18px!important; }
#footer-main { position: relative; }
.section {padding-top: 0px!important; padding-bottom: 0px!important; }

#introduction h1 { font-size: 40px; margin-bottom: 12px; }

#guidance_navigation { position: fixed; height: fit-content!important; left: 0; display: flex; align-items: flex-end; background: #00284A; border-radius: 0px 40px 40px 0px; max-width: 410px; min-width:260px; }
#guidance_navigation > div { width: 233px; }
#guidance_navigation ul { list-style: none; margin: 0; padding: 0; margin-right: 1.5rem; }
#guidance_navigation li { margin-bottom: 1rem; cursor: pointer; color: rgba(255, 255, 255, 0.75);}
#guidance_navigation li.active { color: #EC8FFF}
#guidance_navigation a {text-decoration: none; color: #ffffff; font-size: 16px; }

#guidance_navigation .icon-plus-vertical_line { display: flex; gap: 10px; position: relative; }
#guidance_navigation .icon-plus-vertical_line > span > img { position: absolute; top: 8px; left: 8px;}
#guidance_navigation .icon-plus-vertical_line > span > div { display: inline-block; position: absolute; top: 32px; left:15px; border-left: 2px solid rgba(255, 255, 255, 0.25); height: 40px;}
#guidance_navigation .icon-plus-vertical_line > span { width: 32px; border-radius: 32px; height: 32px; background: rgba(255, 255, 255, 0.25); position: relative;}

#guidance_navigation .icon-checked { display: flex; gap: 10px; position: relative; }
#guidance_navigation .icon-checked > span > img {}
#guidance_navigation .icon-checked > span > div { display: inline-block; position: absolute; top: 32px; left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.25);}
#guidance_navigation .icon-checked > span { width: 32px; padding-left: 12px; }

#guidance_navigation li > ul { margin-block-end: 1em; padding-inline-start: 63px; }
#guidance_navigation + div { max-width: 250px; }
/*.subOptions .active { color: rgba(255, 255, 255, 0.55);}*/

.accordion-container { margin-top: 4rem; max-width: 836px;}
.accordion-container > div {position: relative; cursor: pointer; padding: 1rem 1rem 0 1rem; }
.accordion-container > div > div > img { position: absolute; right: 30px; top: 52px; }
.accordion-container h5 { font-size: 18px; color: #00284A; max-width: 80%; padding-left: 25px;}
.accordion-container hr { margin-bottom: 3rem; }
.accordion-tab > img { transform: rotate(180deg); }
.accordion-wrapper-activated { background: #f3f4f7; border-radius: 20px; padding-top: 2rem!important; margin-bottom: 2rem; position: relative;}
.accordion-wrapper-activated .active > img {transform: rotate(360deg); top: 62px; right: 24px; }
.accordion-wrapper-activated hr { display: none; }

.accordion-tab .active { margin-bottom: 5rem; }
.accordion-content-deactivated { display: none; }

.active .accordion-content-deactivated { display: flex; flex-direction: column; justify-content: space-between; }
.active .accordion-content-footer p{ display: flex; justify-content: space-between; }
.active .accordion-content-text { margin-top: 2rem; }
.active .accordion-content-text p { padding-left: 25px; }
.active .accordion-content-card {display: flex; justify-content: center; height: fit-content!important; padding-top: 0px; padding-bottom: 0px;}
.active .accordion-content-card > p { margin-bottom: 0px; }

.next-step-btn {max-width: 836px; }
.next-step-btn p{display: flex; justify-content: start; }
.next-step-btn .ghost { background: #E3E6EB!important; }


.ico-arrow-north-primary { background-size: 15px!important; }
.ico-arrow-south-primary { background-size: 15px!important; }

.playGIF { width: 100%; border-radius: 12px; max-width: 330px; min-width: 290px;}

.accordion-content-footer > p > a:first-child { visibility: hidden; }


.sticky-fixed { position: absolute!important; }

#main-content > p:last-child { margin: 0px; }

<script> 

$('.subOptions li').on('click', function(e) {
	e.stopPropagation();
	let self = this;
	let tabsLength = $(".subOptions li").length;
	if (self.classList.value === 'active') {
		$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: 0px`)
		self.classList.value = ''
		$('.accordion-container > div > div').each(function() {
			this.setAttribute('class', 'accordion-tab');
			this.parentElement.closest('div').classList.value = ""
		})
	} else {
		$('.subOptions li').each(function() {
			this.classList.value = '';
		})
	  $('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${+self.getAttribute("data-index")*40}px`)
		$('.accordion-container > div > div').each(function() {
			 this.setAttribute('class', 'accordion-tab');
			 this.parentElement.closest('div').classList.value = ""
			if (this.getAttribute('data-index') === self.getAttribute('data-index')) {
					this.classList.value = 'accordion-tab active';
					self.classList.value = 'active';
					 this.parentElement.closest('div').classList.value = "accordion-wrapper-activated";
					if(self.getAttribute('data-index') == 1 ) {
						$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
					}
					else {
					 $('.accordion-content-footer > p > a:first-child').css('visibility','visible');
					}
					  if(self.getAttribute('data-index') == tabsLength ) {
	  					$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
					}
					else {
						 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
					} 
			} 
		})
	}

    e.preventDefault();
}) 

    $('.accordion-container > div > div').on('click', function(e) {
	e.stopPropagation();
	let self = this;
    if( e.currentTarget.classList.value === 'accordion-tab active') {
    e.currentTarget.classList.value = 'accordion-tab';
    e.currentTarget.parentElement.closest('div').classList.value = '';
	$('.subOptions li').each(function(){
		this.classList.value = '';
		if(this.getAttribute('data-index') === self.getAttribute('data-index')) {
			this.classList.value = '';	
		}
	})
	$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: 0px;`);
  } else {
	let tabsLength = $(".subOptions li").length;
	$('.accordion-container > div > div').each(function() {
		this.setAttribute('class', 'accordion-tab');
	 	this.parentElement.closest('div').classList.value = ""	
	})
     self.classList.value = 'accordion-tab active';    
	$('.subOptions li').each(function(){
		this.classList.value = '';
		if(this.getAttribute('data-index') === self.getAttribute('data-index')) {
			this.classList.value = 'active';	
		}
	})
  	$('.icon-plus-vertical_line > span > div')[0].setAttribute('style', `height: ${+this.getAttribute("data-index")*40}px`);
 	this.parentElement.closest('div').classList.value = "accordion-wrapper-activated"
 	if(self.getAttribute('data-index') == 1 ) {
		$('.accordion-content-footer > p > a:first-child').css('visibility','hidden');
	}
	else {
		$('.accordion-content-footer > p > a:first-child').css('visibility','visible');
	}
	if(self.getAttribute('data-index') == tabsLength ) {
  		$('.accordion-content-footer > p > a:last-child').css('visibility','hidden');
	}
	else {
	 $('.accordion-content-footer > p > a:last-child').css('visibility','visible');
	}
  }
	
	e.preventDefault();
})


function checkOffset() {
    if($('#guidance_navigation').offset().top + $('#guidance_navigation').height() 
                                           >= $('#footer-main').offset().top - 1) {
        $('#guidance_navigation').addClass('sticky-fixed')
}
    if($(document).scrollTop() + window.innerHeight < $('#footer-main').offset().top)
        $('#guidance_navigation').removeClass('sticky-fixed');
}
$(document).scroll(function() {
    checkOffset();
});   </script>