Onclick to reveal only one "content" at a time
-
Currently, I have an onclick event that reveals the content of the post (this is displayed as “none” until the onclick event) beneath it after an an image in the post is clicked on.
I only want one post to show up at a time. Say I clicked and revealed the content for Post 1, then if I click on another post (say post 4), I want the content for Post 1 to hide again and the content for Post 4 to show up.
Here is the code for the hidden content
<div><span id="blood-<?php the_ID() ?>" style="display: none;"><?php the_content();?></span> </div>I used <?php the_ID() ?> to create a unique id for each post, so the click would only reveal the content from the respective post.
I then have this code. First I create an array, using “blood-<?php the_ID() ?>” to refer to the id of each hidden content. [I believe my problem lies here]
I then loop through each value in the array “mysongs” using the for loop, going through each hidden content part and hiding it. Then I use
document.getElementById(showme).style.display = 'block'to show the desired content (the one that was last clicked on)<script type="text/javascript"> function thesong(showme) { var mysongs = new Array("blood-<?php the_ID() ?>"); for (boom in mysongs) { document.getElementById(mysongs[boom]).style.display = 'none'; } document.getElementById(showme).style.display = 'block'; } </script>This method worked before when I had a specific id for each hidden content part, but here I use just one id with the <?php the_ID() ?> script, which I think makes a unique id for each post.
However, when creating the array, I basically want to generate a new value for each post using <?php the_ID() ?>, which would refer to the same id for the hidden content. But i guess this isn’t possible or I’m doing it wrong.
Is there anyway you can generate values for an array using just one term, such as mysongs = new array (“x-<?php the_ID() ?>”), which will then generate x-1, x-2, x-3 etc. for each ID.
I know this is probably wrong but if you understand the concept I’m trying to achieve help would be much appreciated, I can’t really find an answer to my specific problem.
Here’s the link to my site
as you can see, clicking on the play button reveals that post’s content, but hiding only works for post 1 and none of the others (most likely because there is only one value in the array that I assumed would automatically generate other values based on ID, but i guess not..)
-
that wouldn’t work. as you’ve realised, the_ID only gets the current ID.
try a jquery accordion.
http://jqueryui.com/demos/accordion/
you’ll basically have to edit the HTML a little to get the required structure, then just enqueue the scripts and it should work. I wrote a blog post for my own implementation.
http://wpadventures.wordpress.com/2011/06/23/custom-post-type-archives-jquery-accordion/Ok i struggled for quite some time to get the code right with the accordion but there are so many parameters that it’s just coming out a mess.
I tried following your post and the links in it but i’m not having any luck.
If this is the code for my home.php, is there any thing you can tell me that i’m doing wrong?
here’s the old one:
<?php get_header() ?> <script type="text/javascript"> function thesong(showme) { var mysongs = new Array("blood-<?php the_ID() ?>"); for (boom in mysongs) { document.getElementById(mysongs[boom]).style.display = 'none'; } document.getElementById(showme).style.display = 'block'; } </script> //this is what i'm currently using to show/hide content <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> //this is the play button <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --> <div><span id="blood-<?php the_ID() ?>" style="display: none;"><?php the_content();?></span> </div> //here is the hidden content <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>and here’s the new one where i tried the jquery accordion.
<?php function enqueue_accordion_script() { wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/scripts/jquery-ui-1.8.js', array( 'jquery' ) ); wp_enqueue_script( 'enqueue-accordion-script' ); } add_action( 'init', 'enqueue_accordion_script' ); function add_jquery_accordion() { wp_enqueue_script( 'add-jquery-accordion', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/scripts/accordionstuff.js', array( 'jquery', 'enqueue-accordion-script' ) ); } add_action( 'init', 'add_jquery_accordion' ); ?> <?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <h3><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --> </h3> <div><?php the_content();?></span> </div> //this is content i want to hide </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i put content after the header (h3), but it’s not coming out to anything resembling what i want.
i saved this
jQuery(document).ready(function() { jQuery("#accordion").accordion({ collapsible: true }); });as accordionstuff.js
and downloaded the accordion script from teh jquery website, which i saved as jquery-ui-1.8.js
this just seems extremely complicated, to me at least, so if there’s anything you can point out if would be much appreciated.
the script loading functions should be in functions.php, not header.php.
those js files should be in your theme directory. the path to the scripts is probably coming out wrong, you can check your page source to see what it’s actually loading.
there also seems to be an extra </span> tag the the_content()
Ok i put the functions in the right place and the js files in my theme directory.
I checked the page source and it’s loading the right js files.
However the problem still remains.
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"><h3><?php while ( have_posts() ) : the_post() ?> <div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" onclick="thesong('blood-<?php the_ID() ?>')" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div><!-- .post --></h3> <div><span id="blood-<?php the_ID() ?>" style="display: none;"><?php the_content();?></span> </div> </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i encased the post in a div with the id “accordion”, and also placed <h3> tags around the part i wanted to be the header.
Is the <h3> the source of my problem? for example, could i use a tag besides <h3> to signal that part that i want to be the header? Or if i could specify an id for the header such as <h3 id=”boomboom”>, where the accordion would only apply to <h3> with that id and not <h3> tags in general (because that tag is already formatted a specific way i believe.
here’s my functions code again
function enqueue_accordion_script() { wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/themes/autofocus/script/jquery-ui-1.8.js', array( 'jquery' ) ); wp_enqueue_script( 'enqueue-accordion-script' ); } add_action( 'init', 'enqueue_accordion_script' ); function add_jquery_accordion() { wp_enqueue_script( 'add-jquery-accordion', get_stylesheet_directory_uri() . 'ftp://tedkim@blazinglucy.com/public_html/wp-content/themes/autofocus/script/accordionstuff.js', array( 'jquery', 'enqueue-accordion-script' ) ); } add_action( 'init', 'add_jquery_accordion' );do i have to add anything into the home.php file for this to work? or is it just a matter of the <h3> tag that i’m using.
thanks again for your patience
the
<h3>code should be within the wordpress loop, so one h3 is output for each post.also, the script url code definitely does not need ftp://… in it.
if you view the page source, you would see that the script loaded is
<script type="text/javascript" src="http://blazinglucy.com/wp-content/themes/autofocusftp://tedkim@blazinglucy.com/public_html/wp-content/themes/autofocus/script/jquery-ui-1.8.js?ver=3.2.1"></script>The src link doesn’t work.
Ok my mistake, fixed the script url code problem and clicked on both links, they are the right scripts.
also put the <h3> tags within the loop,
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"><?php while ( have_posts() ) : the_post() ?> <h3><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div><?php the_content();?> </div> </div> <?php comments_template() ?> <?php endwhile ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>however, it’s still not working.
is the script http://blazinglucy.com/wp-content/themes/autofocus/script/jquery-ui-1.8.js?ver=3.2.1 the correct one?
no that’s the wrong script, the right one has the word ‘accordion’ all over it.
try getting it from the jquery UI download builder page.
http://jqueryui.com/downloadalright i downloaded the right script i believe and replaced that in the functions.php so it loads this
http://blazinglucy.com/wp-content/themes/autofocus/script/jquery-accordion.js?ver=3.2.1
however there is no change…
your other posts are not in the accordion div. you can see it in your page source. only the first post is enclosed within the accordion.
Oops i had the <div id=”accordion”> outside of the loop
I fixed that, but I’m still not getting the whole accordion collapse/show function going on
that’s not right. there should only be ONE accordion div on the whole page. it encloses ALL the posts.
Alright, i put the accordion div outside of the loop so there is one encompassing all the posts
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <?php while ( have_posts() ) : the_post() ?> <h3><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div><?php the_content();?> </div> <?php comments_template() ?> <?php endwhile ?></div> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>i looked the the source page and there is one div with the accordion id that includes all the posts. still nothing, i appreciate your help. what is wrong?
assign the headers the class ‘ui-accordion-header’, and the content divs the class ‘ui-accordion-content’.
also, when you downloaded the jquery accordion script, it would have automatically selected the prerequisites from jquery UI. your script seems to be missing that part.
ok quick question about downloading the jquery accordion script. Do i only select the jquery accordion widget from http://jqueryui.com/download?
or do i download everyything, and then unzip all the contents into my theme directory? right now i only took the jquery.ui.accordion file and put it in my theme directory.
alright i added the classes
<?php get_header() ?> <div id="container"> <div id="content"> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span>', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> <div id="accordion"> <?php while ( have_posts() ) : the_post() ?> <h3 class="ui-accordion-header"><div id="post-<?php the_ID() ?>" class="featured <?php sandbox_post_class() ?>"> <div class="entry-date bigdate"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time('d M'); ?></abbr> <?php the_title() ?> </div> <div class="downlow"><img class="boom" src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play-<?php the_ID() ?>" )" onMouseOver="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play-<?php the_ID() ?>'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" /> </div> <div class="entry-content post-content"> <h4><?php the_title() ?></h4> <p><?php the_excerpt(); ?></p> <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'sandbox' ) . '&after=</div>') ?> </div> <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span> </div></h3><!-- .post --> <div class="ui-accordion-content"><?php the_content();?> </div> <?php comments_template() ?> <?php endwhile ?></div> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link(__('<span class="meta-nav">«</span> Older posts', 'sandbox')) ?></div> <div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">»</span>', 'sandbox')) ?></div> </div> </div><!-- #content --> </div><!-- #container --> <div id="playbutton"> <img src="http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg" name="play" onMouseOver="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-multi.jpg'"onMouseOut="document.images['play'].src='http://blazinglucy.com/wp-content/uploads/2011/07/play-button-blue.jpg'" height="100" width="100"/> </div> <?php get_footer() ?>nothing yet,
when you select accordion, it automatically selects core and widget as well.
when you’ve downloaded it, you need the jquery-ui-1.8.14.custom.min.js script in js folder.
your markup looks fine now, but the scripts are causing errors.
- The topic ‘Onclick to reveal only one "content" at a time’ is closed to new replies.