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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    430
    Thanks
    56
    Thanked 1 Time in 1 Post

    JQuery: Cannot Get Accordion To Work

    Hello,

    I am working on a packages list where this is just a basic version for the time being and I am trying to implement the JQuery Accordion, so if you click on 'Button 1', the content will show.

    I would also like the 1st-4th-child's of the packages to have rounded top corners, however I cannot seem to implement this. The reason why I cannot simply set one for them all is due to needing to have two separate columns for each one at this moment in time, one is hidden for the accordion.

    Live View: Link removed

    Best Regards,
    Tim

    Edit: See my last post for the solution
    Last edited by MrTIMarshall; 03-25-2013 at 09:39 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../../css/Upgrade.css" />
        <script type="text/javascript" src="../../javascript/JQuery/jquery.1.7.2.min.js"></script>
    	<script type="text/javascript">
            $(document).ready(function() {
                $('div.CategoryAccordionButton').click(function() {
                    $('div.accordionContent').toggle();	
                  });
                $("div.accordionContent").hide();
            });
        </script>
    </head>
    
    <body>
    	<div id="SelectPackage">
        
        	<!-- General Information -->
        	<div id="Captions">
            	<div class="Title"><P><span>available</span><br />Packages<br /><span>listings</span></P></div>
            	<div class="Category"><p>General Information</p></div>
                <div class="Sub-Category"><p>Test</p></div>
            </div>
        	<div class="Package">
            	<div class="Name"><P>Basic</P></div>
                <div class="Price"><p>$75<span>/month</span></p></div>
                <div class="KeyFeature"></div>
                <div class="KeyFeature"><p>5</p></div>
            </div>
            <div class="Package">
            	<div class="Name"><P>Standard</P></div>
                <div class="Price"><p>$190<span>/month</span></p></div>
                <div class="KeyFeature"></div>
            	<div class="KeyFeature"><p>10</p></div>
            </div>
            <div class="Package">
            	<div class="Best"></div>
            	<div class="Name"><P>Advanced</P></div>
                <div class="Price"><p>$380<span>/month</span></p></div>
                <div class="KeyFeature"></div>
            	<div class="KeyFeature"><p>50</p></div>
            </div>
            <div class="Package">
            	<div class="Name"><P>Premium</P></div>
                <div class="Price"><p>$760<span>/month</span></p></div>
                <div class="KeyFeature"></div>
            	<div class="KeyFeature"><p>Unlimited</p></div>
            </div>
            
            <!-- Button 1 Bla -->
            <div id="Captions"><div class="CategoryAccordionButton"><p>Button 1</p></div></div>
        	<div class="Package"><div class="KeyFeature"><p></p></div></div>
            <div class="Package"><div class="KeyFeature"><p></p></div></div>
            <div class="Package"><div class="KeyFeature"><p></p></div></div>
            <div class="Package"><div class="KeyFeature"><p></p></div></div>
            
            <!-- Content 1 Bla -->
            <div class="accordionContent">
                <div id="Captions"><div class="Sub-Category"><p>Bla</p></div></div>
                <div class="Package"><div class="KeyFeature"><p></p></div></div>
                <div class="Package"><div class="KeyFeature"><p></p></div></div>
                <div class="Package"><div class="KeyFeature"><p></p></div></div>
                <div class="Package"><div class="KeyFeature"><p></p></div></div>
            </div>
        </div>
    </body>
    </html>
    
    <!-- Localized -->
    Hey, I managed to get the toggle working for ya. That should be a working start, as you should be able to hide the other rows as needed too. I'm not sure what you're looking for w/ the border-radius.... sorry.
    Last edited by bdbolin; 03-25-2013 at 02:48 AM.

  • Users who have thanked bdbolin for this post:

    MrTIMarshall (03-25-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    430
    Thanks
    56
    Thanked 1 Time in 1 Post
    Thank you bdbolin!

    How would I implement the slidedown/slideup where only one can be slid down at a time?

    And regarding the boarder radius, you can ignore that for the time being as I've noticed a couple of errors with having more than one ID of the same name on the page, of which I need to fix first.

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Posts
    430
    Thanks
    56
    Thanked 1 Time in 1 Post
    I have just updated the live view. It appears I can only have one button, of which will show both of the hidden contents.

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    I've just been delving into the basics of jQuery myself... so bear with me. haha. Why don't you have a cell a the bottom of each column with an arrow pointing down indicating a toggle/more info button? So you would have 4 buttons, one at the bottom of each column. When users click the button for that column, it would then only display the details for that given column.

    You can give each of those buttons the .toggle and it will toggle open/close, with each being slid down individually... is that what you're looking for?

    Just throwing some random code as an example....
    Code:
    <div id="basic">
          <div>$75/mo</div>
          <div>5</div>
          <div id="toggle_button">button</div>
          <div id="more_info">
                <div>cell with more info</div>
                <div>another cell with info</div>
         </div>
    </div>
    
    then the js would be something like this:
    
    $("#toggle_button").click( function() {
          $("#more_info").toggle();
    });

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    430
    Thanks
    56
    Thanked 1 Time in 1 Post
    Here is a JSFiddle example of what I would like to accomplish. The idea of each one sliding down does not appeal as the user would want to see them all to compare with one and other.

    Link: http://jsfiddle.net/PJAPk/

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    430
    Thanks
    56
    Thanked 1 Time in 1 Post
    I am working on modifying a snippet I have found which is going well.

    HTML
    Code:
    <div id="SelectPackage">
        <h2>Panel 1</h2>
        <div class="content">
            ....
        </div>
        <h2>Panel 2</h2>
        <div class="content">
            ....
        </div>
        <h2>Panel 3</h2>
        <div class="content">
            ....
        </div>
        <h2>Panel 4</h2>
        <div class="content">
            ....
        </div>
    </div>
    CSS
    Code:
    #SelectPackage {
     width:90%;
     margin:10px auto;
     border:2px solid white;
     -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
     -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
     box-shadow:0px 1px 3px rgba(0,0,0,0.4);
    }
    
    #SelectPackage h2 {
     cursor:pointer;
     margin:0px 0px;
     padding:7px 15px;
     background-color:black;
     font:bold 11px Verdana,Arial,Sans-Serif;
     color:#e6e6e6;
     text-shadow:0px 1px 0px rgba(0,0,0,0.4);
    }
    
    #SelectPackage .content {
     background-color:#ddd;
     padding:10px 15px;
     color:black;
     height:120px;    
    }
    
    #SelectPackage h2.active {
     background-color:#4BB347;
    }
    Javascript
    Code:
    $(function() {
        $('#SelectPackage .content').hide();
        $('#SelectPackage h2:first').addClass('active').next().slideDown('slow');
        $('#SelectPackage h2').click(function() {
            if($(this).next().is(':hidden')) {
                $('#SelectPackage h2').removeClass('active').next().slideUp('slow');
                $(this).toggleClass('active').next().slideDown('slow');
            }
        });
    });
    The only problem I am encountering is that I do not know how to make them all collapsed on load.

    Best Regards,
    Tim


  •  

    Posting Permissions

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