WordPress.org

Ready to get started?Download WordPress

Forums

Onclick to reveal only one "content" at a time (21 posts)

  1. earwave
    Member
    Posted 2 years ago #

    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

    http://blazinglucy.com/

    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..)

  2. fonglh
    Member
    Posted 2 years ago #

    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/

  3. earwave
    Member
    Posted 2 years ago #

    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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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.

  4. fonglh
    Member
    Posted 2 years ago #

    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()

  5. earwave
    Member
    Posted 2 years ago #

    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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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

  6. fonglh
    Member
    Posted 2 years ago #

    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.

  7. earwave
    Member
    Posted 2 years ago #

    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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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?

  8. fonglh
    Member
    Posted 2 years ago #

    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/download

  9. earwave
    Member
    Posted 2 years ago #

    alright 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...

  10. fonglh
    Member
    Posted 2 years ago #

    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.

  11. earwave
    Member
    Posted 2 years ago #

    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

  12. fonglh
    Member
    Posted 2 years ago #

    that's not right. there should only be ONE accordion div on the whole page. it encloses ALL the posts.

  13. earwave
    Member
    Posted 2 years ago #

    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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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?

  14. fonglh
    Member
    Posted 2 years ago #

    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.

  15. earwave
    Member
    Posted 2 years ago #

    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">&laquo;</span>', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('<span class="meta-nav">&raquo;</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>&nbsp;<?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">&nbsp;</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">&laquo;</span> Older posts', 'sandbox')) ?></div>
    				<div class="nav-next"><?php previous_posts_link(__('Newer posts <span class="meta-nav">&raquo;</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,

  16. fonglh
    Member
    Posted 2 years ago #

    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.

  17. earwave
    Member
    Posted 2 years ago #

    ok so i put the jquery-ui-1.8.14.custom.min.js in the js folder (under wp-admin with most of the other js files)

    then i upload the jquery.ui.accordion.js (or do i upload the jquery.ui.accordion.min.js) into the theme folder (in the folder script that created), and also the accordionstuff.js into the theme folder, which would be this script:

    jQuery(document).ready(function() {
    				jQuery("#accordion").accordion({
    					autoHeight: false,
    					collapsible: true
    				});
    			});

    with these file names in mind, is my problem in the functions?

    function enqueue_accordion_script() {
    	wp_register_script( 'enqueue-accordion-script', get_stylesheet_directory_uri() . '/script/jquery.ui.accordion.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() . '/script/accordionstuff.js',
    						array( 'jquery', 'enqueue-accordion-script' ) );
    }
    add_action( 'init', 'add_jquery_accordion' );
  18. fonglh
    Member
    Posted 2 years ago #

    no, you only need the jquery-ui-1.8.14.custom.min.js and the accordionstuff.js files. both of these go into your theme folder, in a script subdirectory.

    you can easily check for yourself whether your functions are generating the right path by checking the page source. it's in the <head> section, under one of the <script src tags

  19. earwave
    Member
    Posted 2 years ago #

    Woo! it's working now! i just wasn't sure which of the downloaded files from jquery were the right script, i checked the page source and thought that the jquery.ui.accordion.js was the correct one,

    i switched that file with jquery-ui-1.8.14.custom.min.js and loaded that one, and now the accordion is working.

    I hopefully won't be running into any more problems, but thanks for the help, again it's much appreciated! I'll buy you a virtual dinner haha!

  20. fonglh
    Member
    Posted 2 years ago #

    congratulations! well you could just mark this thread as resolved instead. it's on the right hand sidebar.

  21. earwave
    Member
    Posted 2 years ago #

    alrighty just a weird functionality problem going on

    so i got my accordion working, and i enabled collapsing. However, there is a small problem: when i collapse the active section, it automatically shifts the page to the top of the accordion.

    For example, if I have the bottom post open, and i click to close it, it automatically scolls to the top of the the page (the top of the accordion).

    do you know what this could be attributed to? none of the options for the accordion really address this

Topic Closed

This topic has been closed to new replies.

About this Topic