I am trying to display dynamic content (dynamic custom fields) inside a boostrap accordion. In order to do so, I'm using $var to get de index of the while loop I'm in, and use that to discriminate the first element and set the "aria-expanded" property to "true" for the first element and "false" for the rest.
When this code is executed, the "aria-expanded" property has "true" as value, and "false" on each other element in the accordion.
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse show" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>
The problem is, when the page loads, all items are expanded, and if I click two times the same element, all other elements collapse.
You must apply show class ONLY to the first accordion-collapse element, so you must verify that the loop index is 0 then apply show class.
class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>"
then your code must look like that:
<div class="accordion faqs" id="accordionExample-b">
<?php if( have_rows('preguntas') ): ?>
<?php
$var = 0;
while( have_rows('preguntas') ): the_row(); ?> <div class="accordion-item">
<h2 class="" id="<?php echo('heading-'.$var)?>">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="<?php echo('#collapse-'.$var)?>"
aria-expanded="<?php if($var==0):echo ('true'); else: echo ('false'); endif;?>" aria-controls="<?php echo('collapse-'.$var)?>">
<h3><?php the_sub_field('pregunta'); ?></h3>
</button>
</h2>
<div id="<?php echo('collapse-'.$var)?>" class="accordion-collapse collapse <?php if($var==0){echo ('show')}; ?>" aria-labelledby="<?php echo('heading-'.$var)?>" data-bs-parent="#accordionExample-b">
<div class="">
<?php the_sub_field('respuesta'); ?>
</div>
</div>
</div>
<?php $var++; endwhile; ?>
<?php endif; ?>
Related
I've got a page which has a Bootstrap tabsection. Every tab contains a machine (custom post type), which has a unique PDF download link attached to it by an ACF field. When pressed on the button, a modal opens with a form which has ID 1350. When the form has been filled in and sent has been hit, the relevant PDF file is automatically downloaded in a new tab.
The problem here is that when there's multiple machines, both the PDF files start downloaden. When the button on the second machine is pressed, the first machine pdf gets downloaded, then the second one.
I've tried outputting event.detail.containrePostId but it only returns the post id of the first machine in the query, twice. What i can't seem to achieve is that when a button is pressed on the form, only that relevant pdf gets downloaded. Below is the flexible content part that handles the tabsection.
<?php elseif( get_row_layout() == 'tabsectie'): ?>
<div class="section wow padding-0 margt-0 margb-0 animated">
<div class="tabsection-slider-wrapper">
<div class="pseudo-bg pseudo-right pseudo-lightblue"></div>
<?php if( have_rows('tabs_repeater') ): $i = 1; // Set the increment variable ?>
<div class="container">
<div class="row justify-content-center tabsection-row">
<div class="col-xl-8">
<div class="tab-wrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<li class="nav-item<?php if($i == 1) echo ' active';?>">
<a class="nav-link<?php if($i == 1) echo ' active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tab" aria-controls="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" aria-selected="true"><?php echo the_title(); ?></a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent">
<?php $i = 1; /* Set the increment variablew */ while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<?php
$pdf_machine = get_field('pdf_machine');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab">
<div class="image-slider-content-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 slider-content-left">
<h1 class="mb-5"><?php the_title(); ?></h1>
<span class="machine-content"><?php get_template_part('blocks/main-fields'); ?></span>
<?php $pdf_machine = get_field('pdf_machine'); ?>
<?php if(!empty($pdf_machine)): ?>
<?php var_dump($pdf_machine); ?>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#downloadModalMachine-<?php echo $i; ?>">Download brochure</button>
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
alert( event.detail.containerPostId );
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="image-slider wow animate__animated animate__fadeInRight" data-wow-offset="100">
<div class="carousel">
<?php $slider = get_sub_field('slider'); ?>
<?php if(have_rows('media')): ?>
<?php while(have_rows('media')): the_row(); ?>
<?php $slider_type = get_sub_field('media_type'); ?>
<div class="slider-item">
<?php if($slider_type == 'image'): ?>
<?php $image = get_sub_field('image'); ?>
<?php if( !empty($image) ): ?>
<img class=" lider-image" src="<?php echo $image['sizes']['gallery']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php elseif($slider_type == 'video'): ?>
<?php $video = get_sub_field('video'); ?>
<?php if (!empty($video) ): ?>
<div class="embed-container">
<?php echo $video; ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="slider-arrow-wrapper">
<div class="slider-nav">
<div class="nav-button nav-btn-left">
</div>
<div class="nav-button nav-btn-right">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</div>
</div>
</div>
<?php endif; ?>
Here is the javascript that generates the download link
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
window.open('%s');
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks
< script >
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("fast");
});
}); <
/script>
I want to display each tuple in different panel upon clicking the button in particular panel the details of that particular tuple should be shown in slide down panel and once again clicking on the button details should be hidden.
but according to my code only first tuple is correctly functioning.
$num=mysqli_num_rows($res); for($i=1;$i
<=$num; $i++) { while($row=mysqli_fetch_array($res)) { ?>
<div>
<a id="flip" class="btn btn-info btn-lg" href="#" id="flip">
<?php echo $row['pname']; ?> </a>
<div id="panel">
<p id="flip">
<?php echo "{$row['startDate']}"; ?> </p>
<p id="flip">
<?php echo $row['endDate']; ?> </p>
<p id="flip">
<?php echo $row['reference']; ?> </p>
</div>
</div>
<hr/>
<?php
remove all the ids, they are unique
you dont need the for loop around the while loop
<?php
while($row=mysqli_fetch_array($res)) {
?>
<div class="item">
<a class="toggle btn btn-info btn-lg" href="#">
<?php echo $row['pname']; ?>
</a>
<div class="panel">
<p>
<?php echo "{$row['startDate']}"; ?>
</p>
<p>
<?php echo $row['endDate']; ?>
</p>
<p>
<?php echo $row['reference']; ?>
</p>
</div>
</div>
<hr/>
<?php
}
?>
<script>
$(document).ready(function() {
$(".toggle").click(function(event) {
event.preventDefault();
event.stopPropagation();
$(this).next('.panel').slideToggle("fast");
});
});
</script>
I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here
I'm having some trouble to render partial when clicking on a anchor tag in Yii2.
My view code is as follows :
<div class="col-md-5 module">
<h2><?php echo $client->subtitle ?></h2>
<div class="text-center industries-wrapper">
<div class="center-wrapper clearfix">
<ul class="nav nav-pills">
<?php foreach ($clientMarkets as $key => $clientMarket) : ?>
<li <?= ($key == 0) ? 'class="active"' : '' ?>>
<a <?= ($key == 0) ? 'href="#1a"' : 'href="#2a"' ?> data-toggle="tab">
<?php echo $clientMarket->title ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="tab-content center-wrapper clearfix">
<?php foreach ($clientMarkets as $key => $clientMarket) : ?>
<div id="1a" <?= ($key == 0) ? 'id="1a"' : 'id="2a"' ?>
class="tab-pane<?= ($key == 0) ? ' active' : '' ?>">
<div class="contact-info">
<ul>
<?php foreach ($clientMarket->children as $key => $client) : ?>
<li><a><?php echo $client->title ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<hr>
<div class="client-description hidden-xs"><?php echo $clientDescription->short ?></div>
</div>
<div class="col-md-7 module">
<div id="client-section-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php echo $this->render('_partials/references', ['name' => 'value']) ?>
</div>
</div>
</div>
I would liked to update the partial view in the div with class carousel-inner when clicking on the anchor tag in div contact-info.
I've looked for some examples using ajax but can't find out how to update the partial on click.
Thanks for your help.
If you don't want write simple JS/AJAX code with own logic, you can try to use Pjax.
Something like this:
Update Pjax container via AJAX
...
<div class="carousel-inner" role="listbox">
<?php
Pjax::begin(['id' => 'pjaxId']);
echo $this->render('_partials/references', ['name' => 'value']);
Pjax::end();
?>
</div>
UPD:
If you want to change URL for AJAX updating use:
<?php $ajaxUrl = \yii\helpers\Url::to(['some-controller/some-action']); ?>
<a href="#" onclick="$.pjax.reload('#pjaxId', {timeout : false, url: '<?= $ajaxUrl ?>'});">
Update Pjax container via AJAX
</a>