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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Accordian Wrapper

    Hello - I am a new member and have joined to see if you can help me with a little problem I am having at the moment.

    I am using a template which already had the script on it. I have edited within Dreamweaver and the accordian drops down no problem when I view on the live view or web browser.

    I have uploaded with all the other css and script files to a temporary website to share with my partner so that she can view it but the drop downs are not working. Can anybody tell me what I am missing please?

    It is here: http://teelineonline.bravehost.com/indexsample.html

    If you scroll down there is the large + signs - when you click on the text it should drop down with further information.

    This is still very much work in progress so there may be other stuff not yet working so please just comment on this one particular section if you can.

    Many thanks (below is example of what it should look like as it does from my live view)

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    First of all, you have a lot of HTML errors in your document. I’d suggest you fix these (even if they aren’t related to your problem, it’s good to have clean and semantic code). Then also, as you see your accordion sections are all collapsed by default. This is problematic if JS is not available for some reason (as is currently the case) because nobody can read the sections. You should have them open by default and only close them using JS; that’s the most user friendly approach.

    Now, the actual problem seems to be that the JS files are not where you say they are: http://teelineonline.bravehost.com/r...ipts/custom.js Check the file paths/locations.

  • Users who have thanked VIPStephan for this post:

    kristell (04-23-2013)

  • #3
    New Coder
    Join Date
    Apr 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I appreciate that and it gives me a good starting point. Thank you.

  • #4
    New Coder
    Join Date
    Apr 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have changed the correct file link and they are opening and closing. I want them closed to start with because there is a lot of information which I don't want all showing as the page will become too messy..... I do appreciate it may not be the most preferred option but it is neatest. I will work on the html issues now. Thank you so much once again. I am new to all this and trying to learn as I go and appreciate people like yourself offering your expertise to those of us who are still coming to grips with it all!!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    What I meant was that the sections are open by default and JavaScript is then closing them initially. The difference is marginal but important because simply spoken it is the JS that is setting them to “closed” state, not the CSS.

    So, rather than writing:
    Code:
    .accordion-wrapper .accordion-content, .toggle-wrapper .toggle-content{
      display:none;
      padding:15px 32px;
      border:solid #E5E4E3;
      border-width:0 1px 1px 1px;
    }
    as you currently have, you should use jQuery’s .hide() function to hide the sections or, even better, add and remove a class with jQuery that has a display: none style applied in the stylesheet.


  •  

    Posting Permissions

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