So I'm trying to make an list op posts on Wordpress, with the content hidden until you click on it, when you click on a other post, it will hide the open one, and show the new one. I came up with this script:
var activePlayer = null
function setActivePlayer(newActivePlayer) {
if (activePlayer) {
activePlayer.classList.remove(“EpisodeShow”);
activePlayer.classList.add(“EpisodeSHide”);
}
activePlayer = newActivePlayer;
if (newActivePlayer) {
newActivePlayer.classList.remove(“EpisodeSHide”);
newActivePlayer.classList.add(“EpisodeShow”);
}
}
Which is in the WordPress post loop like this
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="all-episodes">
<div onclick="{ setActivePlayer(event.element)};" class="row" id="episode-<?php echo get_the_ID();?>"><p class="episode-item">
<?php the_title(); ?> -
<?php echo get_the_date('d/m/Y'); ?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'shows', "",", " ));?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'genres', "",", " ));?>
</p>
</div>
</header><!-- .entry-header -->
<div class="episode-content EpisodeHide" id=" episode-content-<?php echo get_the_ID();?>">
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
</footer><!-- .entry-footer -->
</article>
Which get the styles from a loaded stylesheet which is as simple as this:
.EpisodeHide {
display: none;
}
.EpisodeShow {
display: block;
}
Now I receive this error:
Uncaught ReferenceError: setActivePlayer is not defined
at HTMLDivElement.onclick ((index):103)
the line changes to the line where the posts onclick is on
<div onclick="{setActivePlayer(event.element)};" class="row" id="episode-6"><p class="episode-item">
Any suggestions?
It would help me a lot!!!
Thanks in advance
I figured it out!
For the people who want to know how:
Javascript
var activePlayer = null
function setActivePlayer(newActivePlayerID) {
var newActivePlayer = document.getElementById(newActivePlayerID);
if (activePlayer) {
activePlayer.classList.remove('EpisodeShow');
activePlayer.classList.add('EpisodeHide');
}
activePlayer = newActivePlayer;
if (newActivePlayer) {
newActivePlayer.classList.remove('EpisodeHide');
newActivePlayer.classList.add('EpisodeShow');
}
}
Post Loop Code
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="all-episodes">
<div onclick="{ setActivePlayer('episode-content-<?php echo get_the_ID();?>')};" class="row" id="episode-<?php echo get_the_ID();?>"><p class="episode-item">
<?php the_title(); ?> -
<?php echo get_the_date('d/m/Y'); ?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'shows', "",", " ));?> -
<?php echo strip_tags (get_the_term_list( get_the_ID(), 'genres', "",", " ));?>
</p>
</div>
</header><!-- .entry-header -->
<div class="episode-content EpisodeHide" id="episode-content-<?php echo get_the_ID();?>">
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
</footer><!-- .entry-footer -->
</article>
The Style sheet is the same!
Works like a charm :)