Accordian Effect (collapse-expand) success.. need help more…

  • Resolved Robswaimea

    (@robswaimea)


    10 years, 1 month ago

    Accordion Effect.. Collapse-Expand success using Ultimate Shortcodes on the Event Page….
    BUT… what I am really trying to do is using the shortcode… or in a template.. what this shortcode does..
    [events_list_grouped mode=”monthly” country=”US”]
    But with the Accordion effect…(I don’t think it’s possible)

    If you place the code below in the Settings–>Formatting–> “Default event list format” template it generates the effect I would like to have using something similar to the [events_list_grouped mode=”monthly” country=”US”] shortcode…. but with the accordion effect that the “template” generates…
    Sooo….. I am having trouble figuring out what to hack to place a similar code as below to do what I want… for a “List” that the shortcode <em>[events_list_grouped mode=”monthly” country=”US”] generates, but with Accordion effect.
    NOTE: must have Ultimate Shortcodes plugin for the below to work

    <tr>
			<td>
                #_EVENTDATES<br/>
                #_EVENTTIMES
            </td>
            <td>[su_spoiler title="#_EVENTNAME"  icon="plus-circle"]<strong>#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE</strong><br />#_EVENTEXCERPT{20,...}<br />#_EVENTLINK[/su_spoiler]

        </td>
        </tr>

    https://www.ads-software.com/plugins/events-manager/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support angelo_nwl

    (@angelo_nwl)

    sorry I havent tried Accordion Effect yet however maybe you can try shortcode like

    [events_list format_header="<div>" format_footer="</div>"]
#_EVENTNAME <br/>
[/events_list]
    Thread Starter Robswaimea

    (@robswaimea)

    I was able to come up with numerous work arounds…. but when I implemented them on my “home” page… it failed to reproduce the accordion effect.
    Lots of hours on this.. but it can still be used on another page. Or maybe hard coded into the data base.

    There is a problem with using Ultimate Shortcodes for listing posts… and the workaround for placing an Ultimate Shortcode and the Event Manger and the accordion effect on the same page. It has do with passing variables through the accordion shortcode…

    But using Outbridge’s Nested Shortcodes plugin… nesting the Ultimate Shortcode for “spoiler” (and accordion effect)…
    Using Outbridge’s Nested Shortcodes plugin’

    [events_list_grouped mode="monthly" country="US"][su_spoiler title="#_EVENTNAME" icon="plus-circle"]#_LOCATIONNAME, #_LOCATIONTOWN #_LOCATIONSTATE
#_EVENTEXCERPT{20,...} #_EVENTLINK[/su_spoiler][/events_list_grouped]

    But if you you also wanted an Ultimate Shortcode listing of your other posts….. and used this….
    [su_posts posts_per_page="3" tax_term="79" tax_operator="0" order="asc"]

    There is a conflict… and the effect doesn’t work…
    Finally… I did come up with this.. it does work combined with the Ultimate Shortcodes “Post” list.. but failed on my homepage.. as mentioned too much junk I guess.

    <p>[events_list_grouped mode="monthly" country="US"]</p>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-circle su-spoiler-closed">
<div class="su-spoiler-title"><li>#_EVENTNAME</div>
<div class="su-spoiler-content su-clearfix">#_LOCATIONNAME #_EVENTEXCERPT{20,...}<BR>#_EVENTLINK</div>
<p>[/events_list_grouped]</p></div>
</p>

    Maybe somebody, because I am not very experienced, can, or has, an accordion effect that works universally…

    Thread Starter Robswaimea

    (@robswaimea)

    OK.. so this project may get abandoned.. or not…
    But for now you can see what I talking about at this page…

    The Events Page with examples

    It doesn’t use this Ultimate Shortcode for listing posts because it breaks everything but the last “hack” on the page.
    [su_posts posts_per_page="3" tax_term="79" tax_operator="0" order="asc"]

    I don’t have any use for the “bookings” feature of the Event Manager… so it’s not feasible for me to ‘subscribe’ to the program.

    Great plugin none the less guys.

    Thread Starter Robswaimea

    (@robswaimea)

    OK… now this is really getting NUTS !!!!!

    DO IT SIMPLE !!! man… lessons learned !!!
    Use this….
    Super Simple Accordion JavaScript !!!

    Thanks for sharing the solution. It’ll save someone else from going nuts ??

    Hi,
    I’m trying to get the same thing, but some advide would help.
    Where did you paste Super Simple Accordion JavaScript to make it work? I understand de HTML part is pasted into evens-list-grouped.php, but how about the javascript part?
    Thanks a lot.

    Thread Starter Robswaimea

    (@robswaimea)

    Good day !

    First off.. make sure you can get the accordion working on a generic Html page… nothing fancy, just get it to do what it is supposed to do.

    As always before making any adjustment to your wordpress site, make backups.

    So to answer your question it goes between the <head> and </head> tags.
    Thusly you would be putting it into the header.php of your theme.

    For some reason… the link I posted above about the accordion… is not telling you also need to add another line of javascript code…
    which is this..
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    So you would be putting all this into the “header”….

    <head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function($) {
			$('#accordion').find('.accordion-toggle').click(function(){

				//Expand or collapse this panel
				$(this).next().slideToggle('fast');

				//Hide the other panels
				$(".accordion-content").not($(this).next()).slideUp('fast');

			});
		});
	</script>
	<style>
		.accordion-toggle {cursor: pointer; margin: 0;}
		.accordion-content {display: none;}
		.accordion-content.default {display: block;}
	</style>
</head>

    There is also a plugin you might experiment with… Collapse-o-Matic..
    https://www.ads-software.com/plugins/jquery-collapse-o-matic/

    Some of these things can be simple… sometimes they can get complicated.

    Thanks for the help!
    Did you also modify the plugin fields “Events page grouping header” and “Default event list format”?
    I know it can be simple…but I still can’t make it work!
    brrrrrrr

    Thread Starter Robswaimea

    (@robswaimea)

    Well… actually it can be complicated… there can be jquery conflicts and javascript conflicts.

    But.. still trying to help you out and give guidance..
    I also use a plugin called W4 Post Lists… a great plugin… but you will have to learn the short codes etc etc… the author has done a great job in his documentation explaining…

    Ok… maybe this will help.. with the W4 Post List plugin… in the template section…

    I use this… which might give you guidance..
    NOTE… I have NOT edited Events Manger Page templates for this.. I am using other plugins ie: W4 Post List, AND Events Manager together…

    But maybe you can try and work it out…
    In the example below… it is my custom CSS layout.. so you would have to change things for your needs… I just don’t have the time to cut it down for a generic presentation… but hopefully it will guide you.

    <ul  id="yellow">
[events_list_grouped mode="monthly" category="97" country="US"]</p>
<div id="accordion">
<div class="accordion-toggle">
<li><span style="background-color: #ffff00;"><strong style="color: #ff0000;"><li id="whitepurple" class="withborder">#_CATEGORYIMAGE <font color="black">#_EVENTDATES</font><br />#_EVENTNAME <BR /><font color="black">#_LOCATIONTOWN</font><font color="blue"> @ #_LOCATIONNAME</font></strong></span></div>
</li>
<div class="accordion-content none" style="background-color: #ccffff;">
#_LOCATIONNAME<br /> #_EVENTDATES at #_EVENTTIMES<br />#_EVENTEXCERPT{20,...}<br /><span style="background-color: #ffffff;"><a style="font-size: 14pt;color: red; font-weight:bold" href="#_EVENTURL">#_EVENTNAME more...</a></span>
</div>
<p>[/events_list_grouped]</ul>
</div>

    Events Manager is a great plugin… and the guys here have helped me out a lot and provided great support.. especially as I am not a “paid” subscriber but their dedication to a great project. So I am happy to try and help others here when I can.
    But please note… you may have a theme, or plugin.. etc etc that will conflict with my notes and comments… with that said I can only help to a certain point.
    Good luck hope you get it sorted out.

    IMPORTANT: ( I had come edit this more for clarification)

    What I am describing ONLY expands the INDIVIDUAL Event information.
    NOT a whole group of Events .

    I use W4 Post List… to put all the Events, for example Comedy.. in a list.

    Then each event, Comedy category, from Event Manger… gets produced in a list using W4 Post List… and then when you click on the single Comedy Event (from Events Manager) it expands (accordion).

    Now in another scenario… I use Collapse-o-Matic….
    To have a “group” of Events Manger… expand.
    For example… if I have Comedy, Country Music, Reggae Music as categories in Events Manager…
    Using Collapse-o-Matic… for the individual Category’s
    Comedy (expands like an accordion)
    Country Music (expands like an accordion)
    Reggae Music (expands like an accordion)

    Like I early… mentioned.. well.. somethings can be simple… and well..
    Others can not. Using multiple plugins… learning them.. and hopefully there are no conflicts.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Accordian Effect (collapse-expand) success.. need help more…’ is closed to new replies.