• Resolved odp123

    (@odp123)


    Hi,

    I am trying to create a collapsable overview of authors.
    This is my jQuery:

    <script type="text/javascript">
    jQuery(document).ready(function(){
    
        //hide all
       jQuery('.slidingDiv',this).hide();
    
    	jQuery(".show_hide").click(function(){
    
    		jQuery(".slidingDiv").slideToggle("slow");
    		jQuery(this).toggleClass("active"); return false;
    
    	});
    
    });
    
    </script>

    Here is my template markup. What happens is that all the authors toggles at the same time, instead of individually. Therefor I am let to believe that it is in fact the markup of the template and not the jQuery that is the problem. I just can’t find the error. So a pair of fresh eyes would be nice ??

    <?php
    /*
    Template Name: Medlemmer
    */
    ?>
    
    <?php get_header(); ?>
    
    			<div id="content">
    
    				<div id="inner-content" class="wrap clearfix">
    
    						<div id="main" class="eightcol first clearfix" role="main">
    
    <?php
        $blogusers = get_users('blog_id=1&orderby=nicename&role=subscriber');
        foreach ($blogusers as $curauth) { ?>
                            <div class="userProfile">
                                <header class="profile">
                                    <div class="info">
                                        <h1 class="title"><?php echo $curauth->lydsystem; ?></h1>
                                        <a href="<?php echo $curauth->facebook; ?>"><?php echo $curauth->facebook; ?></a>
                                    </div>
                                    <div class="avatar"><?php echo get_wp_user_avatar($curauth->ID, 100); ?></div>
    <div class="show_hide">Vis Profil</div>
                                </header>
    
                                <div class="slidingDiv">
    	                            <p>
    	                                <b>Beskrivelse: </b><?php echo $curauth->description; ?>
    	                            </p>
    	                            <p>
    	                                <b>Specs: </b><?php echo $curauth->specs; ?>
    	                            </p>
    	                            <?php $upload_dir = wp_upload_dir();?>
    	                            <p>
    	                                <b><a href="<?php echo $curauth->pdf; ?>">Download PDF</a></b>
    	                            </p>
    	                            <p>
    	                                <b>Galleri: </b>
    	                            </p>
    
                                    <?php
                                        echo do_shortcode('[wppa type="album" album="#owner,'.$curauth->user_login.'"][/wppa]');
                                    ?>
                                    </br>
                                </div>
                                <hr/>
                                </br>
                                </div>
                                <?php } ?>
    
    						</div>
    
    						<?php get_sidebar(); ?>
    
    				</div>
    
    			</div>
    
    <?php get_footer(); ?>
Viewing 15 replies - 1 through 15 (of 15 total)
  • Have you reviewed wp_enqueue_script()?

    Thread Starter odp123

    (@odp123)

    Sorry for the late reply!

    In what way do you mean review wp_enqueue_script()?

    Try reading the page at the link I posted above.

    Thread Starter odp123

    (@odp123)

    yes?

    My scripts are enqueued properly and in the right order

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you link the page with the issue?

    Thread Starter odp123

    (@odp123)

    I’ll post the link but its for a private dev server so please confirm that you have it, and ill remove it again.

    thanks!
    [link removed]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looking at your source code I can’t find this:

    <script type="text/javascript">
    jQuery(document).ready(function(){
    
        //hide all
       jQuery('.slidingDiv',this).hide();
    
    	jQuery(".show_hide").click(function(){
    
    		jQuery(".slidingDiv").slideToggle("slow");
    		jQuery(this).toggleClass("active"); return false;
    
    	});
    
    });
    
    </script>

    Thread Starter odp123

    (@odp123)

    that is because it is being enqueued in the script called collapse.js

    Thread Starter odp123

    (@odp123)

    btw. Vis Profil == Show Profile ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Well looking at your jQuery aren’t you actually telling it to toggle all elements that match the “slidingDiv” class?

    jQuery(".slidingDiv").slideToggle("slow");

    Thread Starter odp123

    (@odp123)

    it seems to work standalone

    https://jsfiddle.net/fswR5/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re using different jQuery there:

    $('.show_hide').click(function(){
            $(this).next('.slidingDiv').slideToggle();
             return false;
        });

    Thread Starter odp123

    (@odp123)

    this line is ignored
    jQuery(this).toggleClass(“active”); return false;

    second i changed $ to jQuery other than that it is the same, no?

    $(document).ready(function(){
       $('.slidingDiv',this).hide();
       $('.show_hide').click(function(){
       $(this).next('.slidingDiv').slideToggle();
       return false;
        });
    });

    //

    jQuery(document).ready(function(){
    
        //hide all
       jQuery('.slidingDiv',this).hide();
    	jQuery(".show_hide").click(function(){
    		jQuery(".slidingDiv").slideToggle("slow");
    		return false;
    
    	});
    
    });

    .next is of cause not there but that ‘could’ be besides the point.

    If we take the jsfiddle as the working result. implemented directly in wordpress. it goes like this:

    //on dom ready we load the function and include $ in the parameter
    jQuery(document).ready(function($){
    
    //We then hide the divs we want to collapse
    $('.slidingDiv',this).hide();
    
    //then we make the function that activates when clicking .show_hide classes
    $('.show_hide').click(function(){
    //now we toggle the hidden classes
    $(this).next('.slidingDiv').slideToggle();
    //stop propagation
    return false;
    }); //close
    }); //close
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    jQuery(document).ready(function($) {
    
        $('.show_hide').click(function(){
            $(this).parent().next('.slidingDiv').slideToggle();
             return false;
        });
    
    });
    Thread Starter odp123

    (@odp123)

    ahh yes of cause, thanks Andrew

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘jquery toggle’ is closed to new replies.