WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Jquery problem (show all toggle effect)

[Resolved] Jquery problem (show all toggle effect)

  • 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

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Resolved] Jquery problem (show all toggle effect)’ is closed to new replies.
Skip to toolbar