{"action":"created","issue":{"url":"https://api.github.com/repos/anvk/a11yAccordion/issues/34","labels_url":"https://api.github.com/repos/anvk/a11yAccordion/issues/34/labels{/name}","comments_url":"https://api.github.com/repos/anvk/a11yAccordion/issues/34/comments","events_url":"https://api.github.com/repos/anvk/a11yAccordion/issues/34/events","html_url":"https://github.com/anvk/a11yAccordion/issues/34","id":78669599,"number":34,"title":"Accordion item selector requires \"a11yAccordionItem\" class","user":{"login":"tactics2","id":7565818,"avatar_url":"https://avatars.githubusercontent.com/u/7565818?v=3","gravatar_id":"","url":"https://api.github.com/users/tactics2","html_url":"https://github.com/tactics2","followers_url":"https://api.github.com/users/tactics2/followers","following_url":"https://api.github.com/users/tactics2/following{/other_user}","gists_url":"https://api.github.com/users/tactics2/gists{/gist_id}","starred_url":"https://api.github.com/users/tactics2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tactics2/subscriptions","organizations_url":"https://api.github.com/users/tactics2/orgs","repos_url":"https://api.github.com/users/tactics2/repos","events_url":"https://api.github.com/users/tactics2/events{/privacy}","received_events_url":"https://api.github.com/users/tactics2/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-05-20T19:46:45Z","updated_at":"2015-05-20T20:31:23Z","closed_at":null,"body":"Here's my markup:\r\n\r\n    <div class=\"accordion pane\">\r\n    <section>\r\n    <h2>\r\n      Header #1\r\n    </h2>\r\n    <div>\r\n      First row content\r\n    </div>\r\n    </section>\r\n    <section>\r\n    <h2>\r\n      Header #2\r\n    </h2>\r\n    <div>\r\n      Second row content\r\n    </div>\r\n    </section>\r\n    </div>\r\n\r\nAnd my js:\r\n\r\n    var myAccordion = new A11yAccordion({\r\n    parentSelector: '.accordion',\r\n    AccordionItemSelector: 'section',\r\n    headerSelector: 'h2',\r\n    hiddenAreaSelector: 'div'\r\n\r\nBut that doesn't work. The only way it functions is if I add the \"a11yAccordionItem\" class to each section like so:\r\n\r\n    <section class=\"a11yAccordionItem\">\r\n\r\nAnd it has to be that specific class. Any other one won't work. \r\n\r\nAnd although it's not a bug, it would be nice to have an option to have a certain section open on load, rather than having them all collapsed by default.\r\n\r\nTested on Firefox 38.0.1 Mac.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/anvk/a11yAccordion/issues/comments/104027717","html_url":"https://github.com/anvk/a11yAccordion/issues/34#issuecomment-104027717","issue_url":"https://api.github.com/repos/anvk/a11yAccordion/issues/34","id":104027717,"user":{"login":"tactics2","id":7565818,"avatar_url":"https://avatars.githubusercontent.com/u/7565818?v=3","gravatar_id":"","url":"https://api.github.com/users/tactics2","html_url":"https://github.com/tactics2","followers_url":"https://api.github.com/users/tactics2/followers","following_url":"https://api.github.com/users/tactics2/following{/other_user}","gists_url":"https://api.github.com/users/tactics2/gists{/gist_id}","starred_url":"https://api.github.com/users/tactics2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tactics2/subscriptions","organizations_url":"https://api.github.com/users/tactics2/orgs","repos_url":"https://api.github.com/users/tactics2/repos","events_url":"https://api.github.com/users/tactics2/events{/privacy}","received_events_url":"https://api.github.com/users/tactics2/received_events","type":"User","site_admin":false},"created_at":"2015-05-20T20:31:23Z","updated_at":"2015-05-20T20:31:23Z","body":"Hi Alexey,\n\nI'm not using any of your css at all, just the script and markup I posted.\nAll of the css that controls the showing and hiding of each section is\nwritten inline,  so that's not the issue.\n\nIt functions fine as long as I add a class to each section. If I remove it,\nthe accordion is rendered completely inoperable.\n\nThanks,\n\nDean H. Hamack\nTel: (206)226-0719\nEmail: Dean@BushidoDesigns.net\n\nFrom:  Alexey Novak <notifications@github.com>\nReply-To:  anvk/a11yAccordion\n<reply+007371fa52c2d6aec4d4e8f88724fed9bcf1fbe8474a259c92cf000000011174ae229\n2a169ce04b0671f@reply.github.com>\nDate:  Wednesday, May 20, 2015 1:18 PM\nTo:  anvk/a11yAccordion <a11yAccordion@noreply.github.com>\nCc:  Dean Hamack <dean@bushidodesigns.net>\nSubject:  Re: [a11yAccordion] Accordion item selector requires\n\"a11yAccordionItem\" class (#34)\n\n\nMost likely your accordion looks odd but still works. It is due to the CSS\nfile. I created mine to reflect the default accordion structure. If you want\nto use your own class names and to do something different from the example\nprovided you will need to change CSS.\n\nFurthermore, please see my modified example.html If you start clicking on\nthe rows they will collapse and uncollapse. The only problem that the\naccordion will look weird but it is because CSS needs to be changed.\na11yAccordionItem should be replaced with my new class name. In my example\nit is myItem\n\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"dist/css/a11yAccordion.min.css\" />\n</head>\n<body onload=\"load()\">\n\n  <script type=\"text/javascript\">    var load = function () {      var\naccordion = new A11yAccordion({        parentSelector: '#accordion1',\nhiddenLinkDescription: 'this is some row with data in first accordion',\naccordionItemSelector: '.myItem'      });    };  </script>\n\n  <div id=\"accordion1\" class=\"a11yAccordion\">\n    <section class=\"myItem\">\n      <div class=\"a11yAccordionItemHeader\">\n        <strong>Random Information</strong>\n      </div>\n      <div class=\"a11yAccordionHideArea\">\n        <h2>My other content</h2>\n        <p>This content is accessible by Assistive Technology and Screen\nReaders only when the collapsible area is visible to the user.</p>\n        <a href=\"#\">This link is also accessible only when the collapsible\narea is visible.</a>\n      </div>\n    </section>\n\n    <section class=\"myItem\">\n      <div class=\"a11yAccordionItemHeader\">\n        <strong>Dummy Text and Controls</strong>\n      </div>\n      <div class=\"a11yAccordionHideArea\">\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\neiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\nveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\ncommodo consequat.\n\n        <p>These controls are accessible for interaction by Assistive\nTechnology and Screen Readers only when the collapsible area is visible to\nthe user.</p>\n        <input type='test' placeholder='Please enter some info here'\nstyle='width: 20%' /><br /><br />\n        <input type='test' placeholder='Another control' />\n      </div>\n    </section>\n\n    <section class=\"myItem\">\n      <div class=\"a11yAccordionItemHeader\">\n        <strong>Header with image</strong>\n      </div>\n      <div class=\"a11yAccordionHideArea\">\n        <img \nsrc=\"https://upload.wikimedia.org/wikipedia/commons/f/fe/Google_Images_Logo.\npng\" alt=\"example image for the presentation purposes with a description Y U\nNO COLLAPSE\">\n      </div>\n    </section>\n  </div>\n\n  <script type=\"text/javascript\"\nsrc=\"js/libs/jquery-1.10.0.min.js\"></script>  <script type=\"text/javascript\"\nsrc=\"dist/js/a11yAccordion-0.3.1.min.js\"></script>\n</body>\n</html>\nHope it helps. If not then feel free to create a branch based on my master\nwith a modified example.html which demonstrates a problem you are facing.\nThis way it would be easier for me to help you.\n\n\nReply to this email directly or view it on GitHub\n<https://github.com/anvk/a11yAccordion/issues/34#issuecomment-104023027> .\n\n \n   \n \n\n\n"}}