Accordion effect for content areas, need help…

  • Resolved Spencer Hill

    (@ws5f3dj7)


    15 years, 1 month ago

    So I’m working on this website.

    And the client wants to have the AJAX accordion effect applied to content below H1’s that have three “>” after it (as they do on their current site).

    Now, I know how to implement this effect, but I don’t know how to make it so they can implement that same effect without modifying the code. Does anyone have any ideas? Or maybe know a plugin specifically for this?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Deleted your duplicate topic. Please refrain from posting duplicate matter. Thanks.

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    Sure, how do I delete it? I had to rephrase this question so I need to delete this one. Thanks and sorry!

    dremeda

    (@dremeda)

    A bit more information and an example of the effect would be helpful to point you in the right direction.

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    Hi Dremeda,
    I’m not sure how I can better clarify what my need is. May I ask where, specifically, you’re confused? I’ll try to rephrase this for you. Thank you for your help!

    Here’s a sample of the accordion effect: https://www.asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx

    Thread Starter Spencer Hill

    (@ws5f3dj7)

    Okay, so I found a solution, though it’s not as user friendly for my client as I would like, nor is it a legitimate plugin it does the job for now:

    1. Download the Javascript effects library here.

    2. Upload the Javascripts into a directory within wp-content/themes/your-theme

    3. Call them into your index.php file (or single, page, archive, archives, etc…) like so:

    <script src="<?php bloginfo('template_directory'); ?>/js/prototype.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js" type="text/javascript"></script>
	<script src="<?php bloginfo('template_directory'); ?>/js/accordion.js" type="text/javascript"></script>

    4. Select a page you want the effect on, then select the text you want to use as your toggle button and select the “Insert/Edit Attributes” icon which *should* appear in the lower left portion of your “Kitchen Sink”. (Kitchen Sink is an icon you select in the Visual Editor which gives you a new row of formatting options upon selection.)

    5. When the “Insert/Edit Attributes” option window pops up select “(value)” and a new text input will appear. Simply type “accordion-toggle” there.

    6. After you have completed that step, do the same for the content you want hidden except type “accordion-content” instead.

    Publish you’re page and viola!

    Please let me know if any of you have problems and I will revise these instructions. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Accordion effect for content areas, need help…’ is closed to new replies.