Show/Hide div in loop

  • Resolved scottcarlton

    (@scottcarlton)


    13 years, 3 months ago

    I have been trying to create a show/hide div in the wp loop without any success. This simple script work great for one, but in the loop it toggles everything or nothing. Looking at this I need to be able to append something to each one that gets created so that it only works for that one only. Such as this on there bios. Not even sure if this is the right script to work with. Any help out there?

    <script type=”text/javascript”>
    <!–
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == ‘block’)
    e.style.display = ‘none’;
    else
    e.style.display = ‘block’;
    }
    //–>
    </script>

Viewing 15 replies - 16 through 30 (of 30 total)
  • Thread Starter scottcarlton

    (@scottcarlton)

    $(document).ready(function(){

$('.hidden').hide();

$('a').click(function(){
$('.hidden').show('slow');

$('a.close').click(function(){
$('.hidden').hide('slow');
})
});

});
    Thread Starter scottcarlton

    (@scottcarlton)

    Alright we are making headway here. I have got the code working with this

    $(document).ready(function(){

$('.hidden').hide();

$('a').click(function(){
$( this ).next('.hidden').show('fast');

$('a.close').click(function(){
$('.hidden').hide('fast');
})
});

});

    It allow only the one div to be opened. Now just have to get it opening div and if another is open close it.

    The error I pointed out earlier is still there:

    <a href="#" class"show">

    Of course, should be:

    <a href="#" class="show">

    That alone would cause the jQuery example I gave to not work. ??

    You currently have this in your <head>:

    <script type='text/javascript' src='https://scottcarltonblog.net/author-toggle.js'></script>

    However, there’s no file at that location and it appears to be directly added to your theme’s header.php rather than included the proper way with wp_register_script and wp_enqueue_script in your theme’s functions.php. Did you already remove that code?

    You current jQuery is targeting all <a> tags which is probably not what you want. Did you want two separate buttons for opening and closing (like you have now) instead of a single button that toggles (like your example link)?

    Forcing only one div open at a time isn’t too hard but before I recommend anything it would best to finalize this part.

    Thread Starter scottcarlton

    (@scottcarlton)

    Ya, I removed the script from the header. had the script run in the page just to get it working. Can’t get the function.php to work with

    function add_my_js() {
    wp_register_script( 'my-author-js', get_template_directory_uri() . '/author-toggle.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'my-author-js' );
}

    the file is under wp-content/theme/my-theme

    Once I remove the code from the page directly and place the code back in the js file with the add_my_js in function.php it doesn’t work. Would like to put the file in my js folder under wp-content/theme/my-theme/js

    I have been building this theme from scratch. Here is my function.php

    Thread Starter scottcarlton

    (@scottcarlton)

    Fixed the class issue and set “a” to .show instead. Then set jquery .show back to .slideToggle

    Now just need to get the function working through function.php

    The external JavaScript file is currently being added correctly to every page but this one. If you check your site’s footer on any other page:

    <script type='text/javascript' src='https://scottcarltonblog.net/wp-content/themes/BLANK-Theme/author-toggle.js?ver=3.2.1'></script>

    Is the “our-team” page using a custom template? It seems to be missing the footer: get_footer();

    If you want to move the file here: wp-content/theme/BLANK-Theme/js/author-toggle.js

    Then you just need to alter the second argument of wp_register_script:

    add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'my-author-js' );
}

    And, if you want to have it only load on this one page, you can do this:

    add_action( 'wp_enqueue_scripts', 'add_my_js' );

function add_my_js() {
    if ( is_page( 8 ) ) {
        wp_register_script( 'my-author-js', get_template_directory_uri() . '/js/author-toggle.js', array( 'jquery' ), false, true );
        wp_enqueue_script( 'my-author-js' );
    }
}
    Thread Starter scottcarlton

    (@scottcarlton)

    forgot about that. Fixed it and now works. Almost there now. Just have to get it to close div if another div is clicked to open and get the footer to move down when open.
    Thanks again for all your help!

    Thread Starter scottcarlton

    (@scottcarlton)

    got the toggle working the way I wanted it to with the code bellow.

    $(document).ready(function() {
	$('.bio-block').hide();
        $('.show').click(function(event){
            event.preventDefault();
            var sliderContent = $(this).next('.bio-block');
            $('.bio-block').not(sliderContent).hide();
            sliderContent.toggle();
        });
        $('.close').click(function(){
            $(this).parent().hide();
        });
    });

    Thread Starter scottcarlton

    (@scottcarlton)

    Big Bagel, I wanted to thank you for all your help and teaching me some great stuff along the way! Thanks again!

    This is a great thread. I’ve been dealing with this issue. I’m not as well versed in jquery as I should be. Anyway either of you could help me out in adding this function to my site?

    Thread Starter scottcarlton

    (@scottcarlton)

    Not prob. As soon as I get home I’ll send you a link to the code I used. Hope it will help.

    Amazing! Thank you.

    Thread Starter scottcarlton

    (@scottcarlton)

    Here is the link to the code that I use. Though probably not as clean as it should be, it did the job that I need. If you need any other help let us know. Good Luck.

    https://jsfiddle.net/fFhW7/43/

    Thanks! I’m trying to use this inside a loop, will try and let you know how it works out.

    11 months ago a discussion occurred, 5 posts added in a few hours (again, almost a YEAR later)- goodness for tracking…

Viewing 15 replies - 16 through 30 (of 30 total)
  • The topic ‘Show/Hide div in loop’ is closed to new replies.