Online PHP editor | output for J8I0O

<?php // check if the flexible content field has rows of data if( have_rows('elvedes_content_block') ): // loop through the rows of data while ( have_rows('elvedes_content_block') ) : the_row(); if( get_row_layout() == 'Elvedes Content Block' ): ?> <div class="content-block"> <div class="content-block-inner content-block-background-image"> <div class="container"> <div class="titel-wrapper"> <?php if(get_sub_field('titel_choice') == "ja") { ?> <h1 class="grote-titel titel"> <?php the_sub_field('grote_titel'); ?> </h1> <?php } ?> <h2 class="titel"> <?php the_sub_field('titel'); ?> </h2> </div> <div class="tekst-veld"> <?php the_sub_field('tekst-veld'); ?> </div> <?php if(get_sub_field('button_choice') == "ja-extern") { ?> <a class="smaac-button" href=" <?php the_sub_field('button_link_extern'); ?> "> <span> <?php echo the_sub_field('button_titel'); ?> </span> </a> <?php } ?> <?php if(get_sub_field('button_choice') == "ja-intern") { ?> <a class="smaac-button" href=" <?php the_sub_field('button_link_intern'); ?> "> <span> <?php echo the_sub_field('button_titel'); ?> </span> </a> <?php } ?> </div> </div> </div> <?php $image_1 = (get_sub_field('afbeelding_invoegen') == "afbeelding-choice-1"); if( $image_1 ) {?> <div class="content-block-afb-outer-wrapper"> <div class="content-block-afb-wrapper"> <div class=" content-block-afb-1 afbeelding-color" <?php $image = get_sub_field('afbeelding-1'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> </div> </div> <?php } ?> <?php $image_2 = (get_sub_field('afbeelding_invoegen') == "afbeelding-choice-2"); if( $image_2 ) {?> <div class="content-block-afb-outer-wrapper"> <div class="content-block-afb-wrapper"> <div class=" content-block-afb-2 afbeelding-color" <?php $image = get_sub_field('afbeelding-1'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> <div class=" content-block-afb-2 afbeelding-color" <?php $image = get_sub_field('afbeelding-2'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> </div> </div> <?php } ?> <?php $image_3 = (get_sub_field('afbeelding_invoegen') == "afbeelding-choice-3"); if( $image_3 ) {?> <div class="content-block-afb-outer-wrapper"> <div class="content-block-afb-wrapper"> <div class=" content-block-afb-3 afbeelding-color" <?php $image = get_sub_field('afbeelding-1'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> <div class=" content-block-afb-3 afbeelding-color" <?php $image = get_sub_field('afbeelding-2'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> <div class=" content-block-afb-3 afbeelding-color" <?php $image = get_sub_field('afbeelding-3'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> </div> </div> <?php } ?>  <?php elseif( get_row_layout() == 'elvedes_carousel' ): ?> <div class="content-block"> <div class="content-block-inner content-block-background-image">  <script> (function() { // store the slider in a local variable var $window = $(window), flexslider; // tiny helper function to add breakpoints function getGridSize() { return (window.innerWidth < 600) ? 1 : (window.innerWidth < 1170) ? 2 : 3; } jQuery(function() { SyntaxHighlighter.all(); }); $window.load(function() { $('.flexslider').flexslider({ animation: "slide", itemWidth: 200, itemMargin: 20, randomize: true, move: 1, controlNav: false, touch: true, nextText: "", prevText: "", minItems: getGridSize(), // use function to pull in initial value maxItems: getGridSize(), // use function to pull in initial value start: function (slider) { flexslider = slider; //Initializing flexslider here. } }); }); // check grid size on resize event $window.resize(function() { var gridSize = getGridSize(); flexslider.vars.minItems = gridSize; flexslider.vars.maxItems = gridSize; }); }()); </script> <div class="flexslider"> <ul class="slides"> <?php // check if the repeater field has rows of data if( have_rows('carousel') ): // loop through the rows of data while ( have_rows('carousel') ) : the_row(); ?> <li> <div class="carousel-wrapper"> <div class="carousel-afbeelding" <?php $image = get_sub_field('afbeelding'); if( !empty($image) ): ?> style="background: url(<?php echo $image['url']; ?>)no-repeat;"> <?php endif; ?> </div> <div class="carousel-tekst"> <h3><?php the_sub_field('titel'); ?></h3> <div class="dropcap"><?php the_sub_field('tekst'); ?></div> </div> </div> </li> <?php endwhile; else : // no rows found endif; ?> </ul> </div> </div> </div>   <?php elseif( get_row_layout() == 'elvedes_logo_carousel' ): ?>  <script> (function() { // store the slider in a local variable var $window = $(window), flexslider; // tiny helper function to add breakpoints function getGridSize() { return (window.innerWidth < 600) ? 2 : (window.innerWidth < 1170) ? 5 : 6; } jQuery(function() { SyntaxHighlighter.all(); }); $window.load(function() { $('.flexslider').flexslider({ animation: "slide", itemWidth: 200, itemMargin: 20, randomize: true, move: 1, controlNav: false, touch: true, nextText: "", prevText: "", minItems: getGridSize(), // use function to pull in initial value maxItems: getGridSize(), // use function to pull in initial value start: function (slider) { flexslider = slider; //Initializing flexslider here. } }); }); // check grid size on resize event $window.resize(function() { var gridSize = getGridSize(); flexslider.vars.minItems = gridSize; flexslider.vars.maxItems = gridSize; }); }()); </script> <div class="content-block" id="logo-carousel"> <div class="content-block-inner black-image-background"> <div class="container"> <div class="titel-wrapper"> <h2 class="titel"> <?php the_sub_field('titel2'); ?> </h2> </div> <div class="tekst-veld"> <?php the_sub_field('tekst-veld2'); ?> </div> </div> <div class="flexslider"> <ul class="slides"> <?php // check if the repeater field has rows of data if( have_rows('logo_carousel') ): // loop through the rows of data while ( have_rows('logo_carousel') ) : the_row(); ?> <li> <div> <div class="carousel-logo-afbeelding"> <?php $image = get_sub_field('afbeelding'); if( !empty($image) ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <?php endif; ?> </div> </div> </li> <?php endwhile; else : // no rows found endif; ?> </ul> </div> </div> </div>   <?php elseif( get_row_layout() == 'elvedes_referentie_slider' ): ?> <div class="content-block"> <div class="content-block-inner black-image-background">  <script> (function() { // store the slider in a local variable var $window = $(window), flexslider; // tiny helper function to add breakpoints function getGridSize() { return (window.innerWidth < 600) ? 1 : (window.innerWidth < 1170) ? 1 : 1; } jQuery(function() { SyntaxHighlighter.all(); }); $window.load(function() { $('.flexslider').flexslider({ animation: "slide", itemWidth: 200, itemMargin: 20, randomize: true, move: 1, controlNav: false, touch: true, nextText: " ", prevText: " ", minItems: getGridSize(), // use function to pull in initial value maxItems: getGridSize(), // use function to pull in initial value start: function (slider) { flexslider = slider; //Initializing flexslider here. } }); }); // check grid size on resize event $window.resize(function() { var gridSize = getGridSize(); flexslider.vars.minItems = gridSize; flexslider.vars.maxItems = gridSize; }); }()); </script> <div class="flexslider"> <img class="quote-image" src="<?php echo content_url(); ?>/uploads/2016/05/quote_icon.svg"> <ul class="slides"> <?php // check if the repeater field has rows of data if( have_rows('referentie_slider') ): // loop through the rows of data while ( have_rows('referentie_slider') ) : the_row(); ?> <li> <div class="carousel-wrapper referentie-slider"> <div class="carousel-tekst"> <div class="carousel-referentie"><?php the_sub_field('referentie'); ?></div> <p class="carousel-naam"><?php the_sub_field('naam'); ?> | <span style="color: #EE2E24;"><?php the_sub_field('bedrijfsnaam'); ?></span></p> <p class="bedrijfsomschrijving"><?php the_sub_field('bedrijfsomschrijving'); ?></p> </div> </div> </li> <?php endwhile; else : // no rows found endif; ?> </ul> </div> </div> </div>  <?php elseif( get_row_layout() == 'elvedes-tabs' ): ?> <div class="content-block"> <div class="content-block-inner content-block-background-image"> <div class="container"> <div class="titel-wrapper"> <h2 class="titel"> <?php the_sub_field('titel'); ?> </h2> </div> <div class="tekst-veld"> <?php the_sub_field('tekst-veld'); ?> </div> <?php $tabSection = 0; $tabLabel = 0; $tabContent = 0; ?> <section class="tab-section tab-section--<?php echo $tabSection++; ?>"> <nav class="tab-nav"> <?php if(have_rows('tabs'): ?> <?php while(have_rows('tabs'): the_row(); ?> <a href="#tab-content--<php $tabLabel++; ?>"><?php the_sub_field('tab_label'); ?></a> <?php endwhile; ?> <?php endif; ?> </nav> <?php if(have_rows('tabs'): ?> <?php while(have_rows('tabs'): the_row(); ?> <div id="tab-content--<?php $tabContent++; ?>" class="tab-content"> <?php the_sub_field('tab_content'); ?> </div> <?php endwhile; ?> <?php endif; ?> </section> <?php endwhile; else : // no rows found endif; ?> <script type="text/javascript"> $('.tab-section').each(function(i){ $('.tab-section--' + i + ' .tab-content').not(':first').hide(); $('.tab-section--' + i + ' .tab-content:first').show(); $('.tab-section--' + i + ' .tab-nav span:first').addClass('tab-nav--active'); $('.tab-section--' + i + ' .tab-nav').on('click', 'span', function(){ //Remove class of active tab $('.tab-section--' + i + ' .tab-nav span.tab-nav--active').removeClass('tab-nav--active'); //Add class of active to clicked tab $(this).addClass('tab-nav--active'); $('.tab-section--' + i + ' .tab-content').hide(); //Show clicked tab $($('a',this).attr('href')).show(); return false; }); }); </script> </div>  <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/bootstrap.js"></script> </div> </div> <?php endif; endwhile; else : // no layouts found endif; ?> </div>