im attempting to use an ACF repeater field to build an FAQ accordion using Bootstrap 5 with a simple question and answer field. i'm getting the results to print out but the accordion expander opens all fields on click and not just the targeted field on click. How can i adjust the IDs to only open the field that is clicked?
CURRENT CODE
<?php elseif ( get_row_layout() == 'module__faq' ) : ?>
<!-- Module: FAQ
================================================== -->
<div class="section-interior-content bg-white py-5">
<div class="container text-center text-md-start">
<div class="row">
<div class="col-12 col-lg-4 text-center text-md-start order-lg-first">
<h2 class="black">
Lorem ipsum
</h2>
</div>
<div class="col-12 col-lg-8 order-first">
<?php if ( have_rows( 'faq' ) ) : ?>
<div class="accordion accordion-flush" id="faqlist">
<?php $i=1; while ( have_rows( 'faq' ) ) : the_row(); ?>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed text-uppercase" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
<?php the_sub_field( 'question' ); ?>
</button>
</h2>
<div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
<div class="accordion-body px-4">
<?php the_sub_field( 'answer' ); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<!-- END Module: FAQ
================================================== -->
<?php endif; ?>
UPDATE: SOLUTION
I solved this the quickest way by adding a unique id field for each FAQ - based off this post: Issue with ACF repeater accordeon loop
I solved this the quickest way by adding a unique id field for each FAQ based on this post: Issue with ACF repeater accordeon loop
Related
I'm Struggling adjusting my articles here :
https://cryptoranger.net/news
I'm using bootstrap 4.3.0, here's the code of the rows :
<div class="row bg-light">
<?php
foreach ($newsList as $news){?>
<article class="col-md-4 blogpost border rounded p-0">
<div class="imgBx">
<img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
</div>
<div class="content">
<h2 class="itemrecent1"><?= $news['titre'] ?></h2>
<p class="float-left m-0"><i class="fas fa-clock"></i> <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
<p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
<?php
if ($category === 'news'){?>
<div class="itemrecent1">Read</div>
<?php
}else {?>
<div class="itemrecent1 justify-self-end">Read</div>
<?php
}?>
<div class="clearfix"></div>
</div>
</article>
<?php } ?> <!-- End of news -->
</div>
So i want gutters between my articles...
Besides, if you know how to adjust the content (text inside the box because i tried some flexbox css but nothing is changing (i want at least all Read link at the same level (bottom))...
==> It's working if i put some height in pixel but cant do that because i need responsive design..
Thanks... :D
The gutters are there, they come from the padding on the col-* classes. Because you added the border class to your articles the padding is, naturally, surrounded by a border. Usually when using Bootstrap grid layouts, content is placed within a wrapper element that has the desired col-* class:
<div class="row bg-light">
<?php
foreach ($newsList as $news){?>
<div class="col-md-4">
<article class="blogpost border rounded p-0">
<div class="imgBx">
<img src="/images/<?=$news['image'] ?>" alt="" class="img-fluid">
</div>
<div class="content">
<h2 class="itemrecent1"><?= $news['titre'] ?></h2>
<p class="float-left m-0"><i class="fas fa-clock"></i> <?= $news['dateAjout']->format('Y-m-d') ?></p><br>
<p class="itemrecent1"><?= nl2br($news['contenu']) ?></p>
<?php
if ($category === 'news'){?>
<div class="itemrecent1">Read</div>
<?php
}else {?>
<div class="itemrecent1 justify-self-end">Read</div>
<?php
}?>
<div class="clearfix"></div>
</div>
</article>
</div>
<?php } ?> <!-- End of news -->
</div>
Looks like you actually have it correct on another page on your site
<?php
get_header();
?>
<!-- PORTFOLIO AREA -->
<section>
<hr class="no-margin" />
<?php
wp_nav_menu(array(
'theme_location' => 'category-menu',
'container' => '',
'menu_class' => 'inline align-center portfolio-header',
'menu_id' => 'portfolio-sorting'
));
?>
<div class="middle-container section-content">
<div class="container">
<?php if (have_posts()) : ?>
<ul class="row portfolio-entries">
<?php while(have_posts()) : the_post(); ?>
<li class="span4 box portfolio-entry">
<div class="hover-state align-right">
<p><?php the_title(); ?></p>
<em>Click to see project</em>
<!-- end hover-state -->
</div>
<?php if (has_post_thumbnail()) : ?>
<figure>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</figure>
<?php endif; ?>
</li>
<? endwhile; ?>
</ul>
<?php else: ?>
<div class="middle-container section-content">
<div class="container box section-content align-center"><h2>No posts were found.</h2>
<!-- end container -->
</div>
<!-- end middle-container -->
</div>
<?php endif; ?>
<div class="box align-center portfolio-nav">
<ul class="inline">
<li>← Previous Page</li>
<li>Next Page →</li>
</ul>
<!-- end cta -->
</div>
<!-- end container -->
</div>
<!-- end middle-container -->
</div>
<!-- End Portfolio Area -->
</section>
<?php get_footer();
?>
I'm trying to learn the Wordpress Theme Development and I'm new/fresh in coding of PHP and Wordpress for now I'm just trying to understand the coding of PHP and how to develop Wordpress theme. During a Wordpress theme I am getting the error line given in the title bar and I am unable to understand why I'm getting this error ..?
Any help please.. ??
You used
<? endwhile; ?>
Instead of
<?php endwhile; ?>
The first one may not work if short_open_tag in your php.ini is not set.
See this question for details.
I'm trying to have my columns take the complete width of the screen in small screens and divide their content in two columns.
The following structure does that in small screens, but the links on the nested columns don't work when there are more than one column.
note:
when on small screens the links on the last nested columns always work regardless of how many columns there are.
If the columns are filled with the same content of the first column, the links work on small screens.
I really appreciate your help.
Here are my nested columns:
<div class="container ">
<!-- Example row of columns -->
<div class="row reading-field">
<div class="col-md-4">
<div><h2 class="center">Recent<h2></div>
<?php
$postslist = get_posts('numberposts=2&category=-5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 ">
<h3 class="center"><?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div>
<div class="col-md-4">
<div>
<h2 class="center">Media<h2>
</div>
<?php
$postslist = get_posts('numberposts=2&offset=0&category=5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 center">
<h3>
<?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div>
</div>
</div>
This seems to be using Bootstrap (judging by the class names).
You are nesting your columns incorrectly. You can't directly nest a column inside a column. You need to nest a column inside a row inside a column:
<div class="container ">
<!-- Example row of columns -->
<div class="row reading-field">
<div class="col-md-4">
<div class="row"> <!-- ***** This was missing ***** -->
<div><h2 class="center">Recent<h2></div>
<?php
$postslist = get_posts('numberposts=2&category=-5');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class="post col-sm-6 ">
<h3 class="center"><?php the_title(); ?>
</h3>
<p> <?php the_excerpt(); ?> <p>
</div>
<?php endforeach ?>
</div> <!-- ***** and don't forget the extra closing tag ***** -->
</div>
</div>
</div>
I am using anchors in my wordpress child theme, the base theme uses a Zurb Foundation Grid.
I am simply using the standard anchor code;
<a name="anchor">
and
<a href="#anchor">
Someone told me that the 'name' thing doesn't work in wordpress and you should use ID, but this still gives me the same result. I have three different anchors but they all get directed to the same spot on the page, even though the names are different and all the tags are nicely closed. Why is this happening? This never happened to me before and hours of googling could not solve my problem.
This is my full html code of the homepage, with the anchors in it.
<?php
/*
Template Name: Homepage
*/
?>
<?php get_header(); ?>
<div id="content" class="twelve columns">
<div id="main" role="main">
<?php echo do_shortcode('[orbit-slider]') ?>
</div> <!-- end #main -->
<div class="row">
<div class="nine columns">
</div>
<div id="logoblock" class="three columns">
<img src="http://i44.tinypic.com/2pyw3sl.png">
</div>
</div>
</div> <!-- end #content -->
<div class="row buttonbar">
<div class="twelve columns rowmargintop">
<div id="downloads" class="four columns"><a href="#downloads">
<img src="http://i39.tinypic.com/2v3j8na.png">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Downloads Button Homepage') ) : ?>
<?php endif; ?>
</a></div>
<div id="locator" class="four columns"><a href="#locator">
<img src="http://i42.tinypic.com/25zgdwj.png">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Locator Button Homepage') ) : ?>
<?php endif; ?>
</a></div>
<div id="specials" class="four columns"><a href="#specials">
<img src="http://i40.tinypic.com/16101l1.png">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Button Homepage') ) : ?>
<?php endif; ?>
</a></div>
</div>
</div>
<div class="row rowmargin">
<div class="twelve columns">
<div class="twelve columns downloadbg">
<a id="downloads">
<div class="four columns downloadcontent">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Left') ) : ?>
<?php endif; ?>
</div></a> <div class="four columns downloadcontent">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Mid') ) : ?>
<?php endif; ?>
</div>
<div class="four columns downloadcontent">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Download Right') ) : ?>
<?php endif; ?>
</div>
</div>
<div class="twelve columns downloadbg emailmargin">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Email Me') ) : ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="row rowmargin">
<div class="twelve columns">
<div class="twelve columns">
<div class="twelve columns locatorcontent">
<a id="locator">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Store Locator') ) : ?>
<?php endif; ?></a>
</div>
</div>
</div>
<div class="row"><a id="specials">
<div class="twelve columns rowmargin">
<div class="twelve columns">
<div class="twelve columns">
<div class="twelve columns specialcontent specialstop">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Top Content') ) : ?>
<?php endif; ?>
</div>
</div>
<div class="twelve columns">
<div class="twelve columns specialcontent">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Specials Bottom Content') ) : ?>
<?php endif; ?>
</div>
</div>
</div>
</div></a>
</div>
</div> <!-- end twelve columns -->
<?php get_footer(); ?>
And I uploaded the full code of the page when I open it (it's local atm) and use 'show page source', hoping I could give you guys some more info. http://codepad.org/J9OEq49f
remove the id #locator from your wrapper.
<div id="locator" class="four columns"><a href="#locator">
Also, don't ever use more than one id with the same name on a page. It breaks your code.
That's the problem here. You got multiple id's with the same name. He will fixate on your wrapper instead of your content block down the code.
Note: As you already mentioned, you can also use the name attribute instead of an id attribute.
So I'm designing a site that utilizes parallax scrolling and the HTML5 data attribute. The problem is that nested in one of the data sections (data-slide), I have a link, and it doesn't seem to work unless I place it outside of the data-slide.
url: http://ericbrockmanwebsites.com/dev3/ (at the bottom of the page, in "projects")
Here's the markup:
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<div class="container clearfix">
<div class="row">
<div class="span10 offset1">
<div class="row">
<div class="span3">
<div class="slideno">
Projects
</div> <!-- slideno -->
</div> <!-- span3 -->
<div class="span7">
<div class="gridContainer">
<?php $the_query = new WP_Query( array(
'post_type' => 'page',
'post_parent' => 0,
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 999)); // how many posts to show
x = 0;
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<div class="view view-tenth">
<?php the_post_thumbnail('grid-image'); ?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p></p>
Explore
</div> <!-- mask -->
</div> <!-- view view-tenth -->
<?php $x++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div> <!-- gridContainer -->
</div> <!-- span7 -->
</div> <!-- row -->
</div> <!-- span10 offset1 -->
</div> <!-- row -->
</div> <!-- container clearfix -->
</div><!-- Slide 4 -->
Any advice on what I am doing wrong or how to get around this?
Thanks, as always!
Did you try this one?
input type="button" name="Release" onclick="document.write('<?php the_permalink() ?>');" value="Explore"
Its a different approach of the href.