0 Replies - 17307 Views - Last Post: 15 January 2012 - 09:14 PM

#1 cilaes   User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 75
  • Joined: 12-December 11

Smooth Scroll effect when clicking DIV

Posted 15 January 2012 - 09:14 PM

I have my smooth scroll effect working when you click on a link. It scrolls smoothly to the anchor.
$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
		});


My problem is that the whole header is clickable, and when you click the header that is when it expands or contracts my "Accordion Boxes". Here is the code for that:

<script type="text/javascript">
    //<![CDATA[

    var accordionItems = new Array();

    function init() {

      // Grab the accordion items from the page
      var divs = document.getElementsByTagName( 'div' );
      for ( var i = 0; i < divs.length; i++ ) {
        if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
      }

      // Assign onclick events to the accordion item headings
      for ( var i = 0; i < accordionItems.length; i++ ) {
        var h2 = getFirstChildWithTagName( accordionItems[i], 'H2' );
        h2.onclick = toggleItem;
      }

      // Hide all accordion item bodies except the first
      for ( var i = 1; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }
    }

    function toggleItem() {
      var itemClass = this.parentNode.className;

      // Hide all items
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }

      // Show this item if it was previously hidden
      if ( itemClass == 'accordionItem hide' ) {
        this.parentNode.className = 'accordionItem';
      }
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

     //]]>
    </script>


in the toggleItem() I want to have the same scrolling effect for when someone clicks on the header itself. I tried the following to no avail, and was hoping someone could shove me in the right direction.

function toggleItem() {
      var itemClass = this.parentNode.className;

      // Hide all items
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }

      // Show this item if it was previously hidden
      if ( itemClass == 'accordionItem hide' ) {
        this.parentNode.className = 'accordionItem';
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
      }
    }



Is This A Good Question/Topic? 0
  • +

Page 1 of 1