WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Show/Hide div in loop (31 posts)

  1. scottcarlton
    Member
    Posted 2 years 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>

  2. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    <-- these are for comments in HTML -->

    Remove the comments if you want this to run. Also see the forum rules for posting code.

  3. Big Bagel
    Member
    Posted 2 years ago #

    @SwansonPhotos:

    Wrapping JavaScript in an HTML comment used to be standard practice to keep browsers that didn't support JavaScript from having problems. The JavaScript inside will still run regardless. However, it is true that since practically every browser used today can understand JavaScript, there's no real reason to do it anymore.

    @scottcarlton:

    The problem is that your script is probably targeting your entire content section. The best way to toggle specific content is by using jQuery. If you're trying to show/hide individual posts, you can give a link to your site and I'll try to come up with a working code example; it shouldn't be too hard. If you're looking to hide content within a post/page you can also check out this plugin:

    http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

  4. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    @ Big Bagel,
    In this form?

  5. Big Bagel
    Member
    Posted 2 years ago #

    That's how you would do it if you were using XHTML, right above it is the example for HTML like the OP's code example:

    http://en.wikibooks.org/wiki/JavaScript/Placing_the_Code#Inline_HTML_comment_markers

  6. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    Isn't the default DOCTYPE for WordPress sites XHTML 1.0 Transitional?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    And what about stripping HTML tags?

  7. Big Bagel
    Member
    Posted 2 years ago #

    @SwansonPhotos:

    The DOCTYPE is completely up to the theme (look in header.php). Plus, using the wrong example won't break anything other than validation. With the browsers used today it's best just to not use either.

    And what about stripping HTML tags?

    What?

  8. Pioneer Valley Web Design
    Member
    Posted 2 years ago #

    http://www.w3.org/TR/xhtml1/#h-4.8

    strip_tags is used by several WordPress functions including the excerpt.

    Commenting JavaScript in this fashion was required a very long time ago, but unless you are running Netscape 1 or IE4, it's not required and can cause validation issues are even be stripped out confusing WP.

    Additionally, the JavaScript should be in a separate file, the file called in the head or footer removing any such issues.

    I also disagree about validation issues, if a page is not able to be validated based on the DOCTYPE called, it can and will cause issues. I will continue to rely on the expertise of the those who continue to strive towards validation.

  9. Big Bagel
    Member
    Posted 2 years ago #

    @SwansonPhotos:

    I'm aware of strip_tags. I'm assuming the OP's code is being included directly in the theme (in header.php for example). It wouldn't be run through any functions so strip_tags isn't an issue.

    Additionally, the JavaScript should be in a separate file, the file called in the head or footer removing any such issues.

    I know, but we weren't taking about that. The OP's code was obviously being included directly in the file, so I constrained my recommendations to such. My offer to give a jQuery example, if taken, would have included this fact.

    I also disagree about validation issues, if a page is not able to be validated based on the DOCTYPE called, it can and will cause issues.

    I never said validation issues should be ignored. I simply said that the only issue with accidentally using the wrong technique in this very specific case would be that it won't validate. In other words, it will still work as expected in all relevant browsers. Further, since we can't check the DOCTYPE of the OP's theme anymore, this doesn't really matter.

    Commenting JavaScript in this fashion was required a very long time ago, but unless you are running Netscape 1 or IE4, it's not required and can cause validation issues are even be stripped out confusing WP.

    I know...that's what I've been saying. From my previous posts:

    However, it is true that since practically every browser used today can understand JavaScript, there's no real reason to do it anymore.

    With the browsers used today it's best just to not use either.

    Since these posts don't have much of anything to do with the OP's original topic it would be best to continue asking questions in a new topic or, if you want to direct them specifically towards me, on my site.

  10. scottcarlton
    Member
    Posted 2 years ago #

    @Big Bagel
    Thanks for your response. Ya, the code as of now is in the header.php file. Not sure if that is best, but as a newbie and not an experienced js coder or wordpress coder, it's the easiest for me. This issue is that it does target all hidden divs causing them all to open or close. The other issue that I came across in the loop is that it will target only one div instead of the div in that particular loop posting. I keep search google for a fix, but haven't found one yet.
    As for the plugin, it looks great, but I am trying to stay away from plugins as much as possible. I would rather learn how to do it versus just adding a plugin for something. Helps me learn. Just a personal thing. Plus my trying to make it user friendly as possible for my client. So shortcode just adds one more think to teach my client.

    @SwansonPhotos
    Thanks for the posting code rules. I'm new to the forums and didn't realize the code posting. It will be helpful in the future

  11. Big Bagel
    Member
    Posted 2 years ago #

    If providing a link to the site is possible, that would be super helpful. Without actually seeing the structure of the site and exactly what you want hidden/shown it's hard to suggest anything specific.

  12. scottcarlton
    Member
    Posted 2 years ago #

    Here is a link to what I am trying to accomplish so what.

    So I have my get_title and professional title with image in a box with the "a href" attribute and get_content and contact info in a hidden div until clicked. All in a loop.

    here is a link to the code....

    Wish I had more, but as I work on this will try and get a page up for you to see. Thanks again!

  13. Big Bagel
    Member
    Posted 2 years ago #

    That's enough to see how everything is structured. :)

    So, when the title and image that goes along with it (currently wrapped in an <a>) is clicked, the "hidden" <div> should toggle on and off? Will there be multiple copies of this code on the same page or only one? As I mentioned earlier, you probably want to go with jQuery. Here's an example that should work with the code you gave:

    jQuery( document ) . ready( function( $ ) {
        $( '.show' ) . click( function() {
            $( this ) . next( '.hidden' ) . slideToggle( 'fast' );
        } );
    } );

    This essentially says, when the page is done loading, if somebody clicks on any element with the class "show", that the following element with the class "hidden" should be toggled.

    You can put that in a separate file, upload it wherever you want (probably in your theme's folder) then simply include it in whatever page you want it to work on. For example, if you name it author-toggle.js and put it directly in your theme's folder (wp-content/themes/your-current-theme) then, to include it, you can add something like this to your theme's functions.php:

    add_action( 'wp_enqueue_scripts', 'add_my_js' );
    
    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' );
    }

    If you wanted to only have the script load on certain pages you can wrap it up in a conditional. For example, if you only wanted it on the page with ID = 7, then:

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

    Here are reference pages to some of the things I used in my examples:

    Function Reference/wp register script
    Function Reference/wp enqueue script
    Function Reference/get template directory uri
    http://api.jquery.com/slideToggle/
    http://api.jquery.com/next/

    Of course, if you plan on editing a theme, it's always a good idea to use a child theme:

    Child Themes

    If you do use a child theme, my example for functions.php might need a little altering depending on where you upload the JavaScript file.

    Also, it was probably just lost in the move to pastebin, but make sure there's an equals in there:

    <a href"#" class"show">

    Once you get a working page up I'll be happy to troubleshoot any problems. I haven't exactly tested may examples to make sure there aren't any errors. :)

  14. scottcarlton
    Member
    Posted 2 years ago #

    page is up. here

    Still not working. Right now just copy pasted as you say just to see if I could get it working. There will be multiple ones though because it is in the query post loop.

    Thanks for your help. This defiantly help me understand this alot more.

  15. scottcarlton
    Member
    Posted 2 years ago #

    Doesn't seem to be loading the js file.

  16. scottcarlton
    Member
    Posted 2 years ago #

    Ok I have got it to work with this. But it opens all the hidden divs. Now I need to had a parent/child to it if I am correct.

    <script src="http://pastebin.com/embed_js.php?i=LH7xvpyf"></script>

    I had to post the code directly into the page though, because it's not working through function.php

  17. scottcarlton
    Member
    Posted 2 years ago #

    $(document).ready(function(){
    
    $('.hidden').hide();
    
    $('a').click(function(){
    $('.hidden').show('slow');
    
    $('a.close').click(function(){
    $('.hidden').hide('slow');
    })
    });
    
    });
  18. scottcarlton
    Member
    Posted 2 years ago #

    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.

  19. Big Bagel
    Member
    Posted 2 years ago #

    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='http://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.

  20. scottcarlton
    Member
    Posted 2 years ago #

    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

  21. scottcarlton
    Member
    Posted 2 years ago #

    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

  22. Big Bagel
    Member
    Posted 2 years ago #

    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='http://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' );
        }
    }
  23. scottcarlton
    Member
    Posted 2 years ago #

    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!

  24. scottcarlton
    Member
    Posted 2 years ago #

    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();
            });
        });
  25. scottcarlton
    Member
    Posted 2 years ago #

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

  26. design@ohthiskid.com
    Member
    Posted 1 year ago #

    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?

  27. scottcarlton
    Member
    Posted 1 year ago #

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

  28. design@ohthiskid.com
    Member
    Posted 1 year ago #

    Amazing! Thank you.

  29. scottcarlton
    Member
    Posted 1 year ago #

    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.

    http://jsfiddle.net/fFhW7/43/

  30. design@ohthiskid.com
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic