Databases
StackOverflow2013
Postsdbo
POJQuery Accordian that collapses exposed item when another item is clicked
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Accordian that collapses exposed item when another item is clicked
    primarykey
    data
    text
    <p>I must be close and I have tried different methods to achieve my goal but all have failed. I am sure is someone points out the answer I will be giving myself a dope slap. My goal is to have a question and answer section that would show the answer when you click on it. I have tried the simple slideToggle() and hide children method. I think that the slideToggle() will be the best for my needs. Since the Q&amp;A is data driven, I am using classes and not IDs. I thought given the nature of my question, seeing my failed jsfiddles would show what was tried and be more helpful. </p> <p>Using children method I tried it at <a href="http://jsfiddle.net/5L8fQ/6/" rel="nofollow">http://jsfiddle.net/5L8fQ/6/</a>.</p> <pre><code> $(document).ready(function () { // hide the answers //$('.answer').hide(); $('showanswer').click(function () { $(this).parent().parent().next('.answer').slideToggle(); }); }); </code></pre> <p>The HTML is simple. Here is a piece</p> <pre><code>&lt;ul id="questionsContainer"&gt; &lt;li&gt; &lt;div&gt;&lt;a href="#" class="showanswer"&gt;Where can I find an installation document?&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;div class="answer"&gt; &lt;h4&gt;Answer&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;Login&lt;/li&gt; &lt;li&gt;Go to download&lt;/li&gt; &lt;li&gt;Installs and Updates&lt;/li&gt; &lt;li&gt;Click on download.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br /&gt; </code></pre> <p>On this I have commented out the hide answer class because I wanted to make it simple for debugging for me. I have also tried a different method based on <a href="http://www.jacklmoore.com/notes/jquery-accordion-tutorial/" rel="nofollow">http://www.jacklmoore.com/notes/jquery-accordion-tutorial/</a> which shows what I wish to do and I want my code to do the same. My attempt at doing it like that is at the same jsfiddle.net link but version 8 . It should be noted the HTML is structured right for the first item and I have been playing with the code to see what will happen to the others. My thought was if it is worked on the first item, I could change the structure to the others. I hope that is solid thinking. </p> <p>I do have a question though for everyone here in addition to the JQuery help. Is it possible to link to a page, like you would do from an outside page and have it go to a section in the receiving page, to have a link go to a section and initiate the slideToggle() event for that link. In other words, if someone wants to see the question and answer and they are coming from an external page, that link is opened up to show the answer? From what I am learning on JQuery I believe the answer is no. (will this be another self-induced dope slap? )</p> <p>Thanks for considering to help me out. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USenvirodat
    1. USenvirodat
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COHave you considered using jQuery UI, it has an accordion already implemented.
      singulars
      1. POJQuery Accordian that collapses exposed item when another item is clicked
      1. USArqu
    2. COPlease come up with a more descriptive title for your question.
      singulars
      1. POJQuery Accordian that collapses exposed item when another item is clicked
      1. USj08691
    3. COThank you Hiral for the answer. That does what I am looking for. j08691 thank you for the suggestion for a more descriptive title. I will do that.
      singulars
      1. POJQuery Accordian that collapses exposed item when another item is clicked
      1. USenvirodat
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload