Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript collapse expand need help!

    Hi I got this javascript code and able to use it in my project. If anyone can help me on this, I want to add a button when I click it will expand all. below is the code.

    <script type="text/javascript">$(document).ready(function(){$('#promo-content')
    .children('div:not(.promo)').hide().end()
    .find('h3 a').click(function(){var $this=$(this);if($this.hasClass('collapse')){$this
    .removeClass('collapse')
    .addClass('expand')
    .find('em').text('Read More').end()
    .parent('h3').next('div:visible').slideUp('fast')
    ;}
    else if($this.hasClass('expand')){$this
    .removeClass('expand')
    .addClass('collapse')
    .find('em').text('Collapse').end()
    .parent('h3').next('div:hidden').slideDown('fast')
    ;}
    else{alert("no class");}})
    ;});</script>

    and here is the html code


    <div class="lcol" id="promo-content">

    <h3><a class="collapse" href="javascript:void(0);"><b>Layers of Protection Analysis (LOPA)</b> <span><em>collapse</em></span></a></h3>

    <div class="promo">
    <p class="promo-content-title" id="promo-new">Paper 1<span></span></p>

    <p class="style13">Layers Of Protection Analysis For Human Factors (LOPA-HF)</p>
    <p>Process hazard analysis (PHA) performed to meet the requirements of OSHA and EPA
    regulations must address Human factors. Both the human failures that can cause</p>

    </div>


    <h3><a class="expand" href="javascript:void(0);"><b>Software Promotions</b> <span><em>collapse</em></span></a></h3>
    <div style="display: none; ">
    <div class="promo2">
    <p class="promo-content-title" id="promo-new"><span>Software Promotions 1M</span></p>
    <p>Quam euimod sed, semper ut potenti pellentesque</p>
    </div>
    </div>

    </div>
    Last edited by manilabox; 07-23-2011 at 02:52 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I've done something very similar on my site, using this approach:

    Code:
    <script type="text/javascript">$(document).ready(function(){
       $('#promo-content h3').click(function(event){//add a click event to the h3
              if(!event.detail || event.detail==1){//only fire on first click 
              $(this).next().slideToggle();//slide the following element
              $(this).toggleClass('active');//add a class so it can be identified
              $(this).find('span').text($(this).find('span').text() == 'expand' ? 'collapse' : 'expand');//toggle the label
              return false;
              }
       });
       
       $('#show-all').click(function(){
       		$('#promo-content h3:not(.active)').click();//expand everything that's not active on click
       });
    
       $('.promo').hide();//hide all the promos when the page loads
       $('#promo-content h3').removeClass('active').append(' <\span>expand<\/span>');//add the labels
       $('#promo-content h3:first').click();//show the first element
    ;});</script>
    
    
    
    <div class="lcol" id="promo-content">
    
    <h3 class="active">Layers of Protection Analysis (LOPA)</h3>
    
    <div class="promo">
    <p class="promo-content-title" id="promo-new">Paper 1<span></span></p>
    
    <p class="style13">Layers Of Protection Analysis For Human Factors (LOPA-HF)</p>
    <p>Process hazard analysis (PHA) performed to meet the requirements of OSHA and EPA
    regulations must address Human factors. Both the human failures that can cause</p>
    
    </div>
    
    
    <h3 class="active">Software Promotions </h3>
    <div class="promo">
    <p class="promo-content-title" id="promo-new"><span>Software Promotions 1M</span></p>
    <p>Quam euimod sed, semper ut potenti pellentesque</p>
    </div>
    </div>
    <p id="show-all">Show all</p>
    So when the page loads all the content is displayed, so it's still available to users who have js disabled. The script hides all the .promo content, adds a span to the heading to indicate that the .promo can be toggled, and a click handler. Then show the first set of content. This allows your html markup to be a bit cleaner as well.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •