Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
idprojectathon-highlight
classsection
Div
classcontainer
Div
classcols
Div
classcol-8
Html-bobswift
<h2>Projectathon highlights</h2>
<p class="past-insights-p">Discover how the first Projectathon helped Member States prepare for the Once-Only Technical System launch and gain valuable insights from participants and support teams.</p>
Html-bobswift
<script>
$(document).ready(function(){

// Show the first tab and hide the rest
$('#tabs-video-nav li:first-child').addClass('active');
$('.tab-video-content').hide();
$('.tab-video-content:first').show();

// Click function
$('#tabs-video-nav li').click(function(){
  $('#tabs-video-nav li').removeClass('active');
  $(this).addClass('active');
  $('.tab-video-content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
});

});
</script>
Div
classcols cols-video justify-content-center
Div
classcol-8
Html-bobswift
<div id="tabs-video-content">

<div id="tab1" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fkLjEdWG1MbY" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab2" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fOCAqdAzlYO4" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab3" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fEBDA9SJS46M" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

<div id="tab4" class="tab-video-content">
<div class="tabs-video-content-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fzMOmcE3FVm4" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
</div>

</div> 
Div
classcols cols-video
Div
Html-bobswift
<ul id="tabs-video-nav">
<li><a href="#tab1"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-aftermovie.png" alt="OOTS Projectathon"></span><span class="cover-text">"OOTS Projectathon"<br><span style="font-size:14px"><strong>19 - 21 April 2023, Brussels, Belgium</strong> - Aftermovie</span></span></a></li>
<li><a href="#tab2"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-david-blanchard.png" alt="The Value of Once-Only"></span><span class="cover-text">"The Value of Once-Only" <br> DAVID BLANCHARD<span <br><span style="font-size:14px">Deputy> <strong>David Blanchard</strong> - Deputy Head of Unit, DG GROW European Commission</span><br>JOAOCommission<br><strong>Joao RODRIGUESRodrigues FRADEFrade</strong> <br><span style="font-size:14px">Head- Head of Sector Building Blocks, DIGIT European Commission</span></span></a></li>
<li><a href="#tab3"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-anne-gaelle-berge.png" alt="What is a Projectathon"></span><span class="cover-text">"What is a Projectathon"<br><span style="font-size:14px"><strong>Anne-Gaëlle Bergé</strong> - Expert in System Interoperability, Kereval</span></span></a></li>
<li><a href="#tab4"><span class="cover-play"><img class="cover-img" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/cover-video-projectathon-1-flora-kardos.png" alt="Once-Only technical support"></span><span class="cover-text">"Once-Only technical support"<br><span style="font-size:14px"><strong>Flora Kardos</strong> - Service Lead, European Commission</span></span></a></li></ul>

<script>
let listOfVideos = document.querySelector("#tabs-video-nav");
Array.from(listOfVideos.children).forEach((li, indexList) => { li.addEventListener("click", function(e) { $("iframe").each(function(index) { if(index != indexList) {
    var src = $(this).attr('src');
    $(this).attr('src', src);}});})})
</script>
Div
classprojectathon-highlight-past cols justify-content-between align-items-center
Div
classcol-7
Html-bobswift
<p class="past-insights-p">Get more insightful information from each Projectarthon reflection and participants' perspectives.</p>
<p class="past-insights-cta"><a target="_blank" class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/EU+Member+States+note+success+of+first+Once-Only+Technical+System+Projectathon"><span>Go to Projectathon #1 highlights</span><span class="ico-cta-forward"></span></a></p>
Div
classcol-4
Html-bobswift
<p class="past-insights-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-past-insights.png"></p>

...