WordPress.org

Forums

[resolved] Jquery problem (show all toggle effect) (3 posts)

  1. Jaswinder0091
    Member
    Posted 1 year ago #

    What i want to achieve is to expand all the div's by clicking on expand all button and change the text to Collapse all. I am able to toggle individually but not all together.
    here is the code
    Header.php
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    In page

    <script>
    jQuery(document).ready(function($){
    	$('#expand').click(function() {
          var $this = $(this);
        $('.all').slideToggle(500, function() {
            $this.text( $(this).is(':visible') ? 'Collapse All' : 'Expand All' );
        });
    });
    });
      </script>
    
    <button id="expand">Expand All</button>
    
    <script>
    jQuery(document).ready(function($){
      $('#one').click(function(){
        $("#explain").slideToggle(500);
      });
    });
    </script>
    
    <button class="exams_button" id="one">First</button>
    <div class="details all" id="explain"></div>
    
    <script>
    jQuery(document).ready(function($){
      $('#two').click(function(){
        $("#explain1").slideToggle(500);
      });
    });
    </script>
    
    <button class="exams_button" id="two">First</button>
    <div class="details all" id="explain1"></div>

    Style
    '
    .details
    {
    width:200px;
    height:200px;
    background-color:#f00;
    float:left;
    }
    '
    the script is working fine in simple html page but not in wordpress.. Any Help

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    WordPress ships with jQuery. Many plugins and themes also load jQuery. To avoid conflicts with these plugins and themes you should enqueue your scripts:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Link_a_Theme_Script_Which_Depends_on_jQuery

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  3. Andrew
    Forum moderator
    Posted 1 year ago #

    You should also be using some browser developer tool to view your browser's console log when developing JavaScript.

    Try the developer tool buit-in to Chrome: https://developers.google.com/chrome-developer-tools/

    https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console

Topic Closed

This topic has been closed to new replies.

About this Topic