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

    https://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..)

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter earwave

    (@earwave)

    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' );

    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

    Thread Starter earwave

    (@earwave)

    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!

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

    Thread Starter earwave

    (@earwave)

    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

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Onclick to reveal only one "content" at a time’ is closed to new replies.