We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

jQuery accordion revo - show the cotents of container documents

    • 38094
    • 15 Posts
    blueweb Reply #1, 12 years, 5 months ago
    Does anybody know, if it's possible to have the contents of a container document shown when clicked?

    In case you know, I would appreciate your help very much!

    • sottwell Reply #2, 12 years, 5 months ago
      Do you mean to have a listing of child documents? That's done with getResources. Use any javascript accordion that you want, and have the getResources use a tpl to generate the structure the accordion javascript expects. Unordered lists, definition lists, divs or paragraphs can all be produced by getResources.

      http://rtfm.modx.com/display/ADDON/getResources
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 38094
        • 15 Posts
        blueweb Reply #3, 12 years, 5 months ago
        I am not sure, I understand exactly what you mean.

        The accordion works as it should with 4 levels. My problem is, that the containers expand the sub levels as they should, but is unable to display content of it's own.

        Thank you for your reply!
        • sottwell Reply #4, 12 years, 5 months ago
          The container document will display anything you put in its content, just like any resource. Usually it will have the getResources snippet call in its content, but it can have anything else you want.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 38094
            • 15 Posts
            blueweb Reply #5, 12 years, 5 months ago
            I have no prior experience working with Modx or getResources! Would you happen to have an example of how to integrate the getResources snippet into the content of the container?

            I spent many sleepless hours over this, but now I see a little light at the end - hope I can make it work, thank you for your assistance!
            • sottwell Reply #6, 12 years, 5 months ago
              Just put [[getResources? ...]] snippet tags in the content of your parent resource wherever you want the listing to appear. The documentation I linked to earlier will tell you what options to use, and how to create a custom tpl for its output using a chunk.

              What I do when using a Javascript scroller or accordion is to copy a single item's block of HTML from a working accordion's page, paste that into my tpl chunk, then replace the changeable content items, such as the title, the body, and the URL to the item's page, with the appropriate getResources placeholders. For example
              <div class="post">
    <div class="entry">
            <p class="page"><a href="[[~[[+id]]]]">[[+tv.bookPageImage]]</a></p>
    </div>
    <span id="summary">[[+introtext]]</span>
</div>

              This will create, for each resource getResources is told to fetch, a div block with the classname of "post", a paragraph to hold an image from a Template Variable that is also a link to this individual item's page, and a span to hold the item's introtext value. The javascript will use that span to create a caption for the image. It will use this structure to make a rotator from these blocks that getResources will generate.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 38094
                • 15 Posts
                blueweb Reply #7, 12 years, 5 months ago
                Sorry I don't think I made myself clear. To illustrate my problem in detail, I attached a screenshot...

                Thank you!
                • sottwell Reply #8, 12 years, 4 months ago
                  Does your accordion block the default action of a link? Most accordions will do so; instead of loading the page the URL in the link points to it simply opens the branch of the accordion.

                  I think what you really want here is a menu; use Wayfinder and a menu script rather than getResources and an accordion. For example, http://apycom.com/ [ed. note: sottwell last edited this post 12 years, 4 months ago.]
                    Studying MODX in the desert - http://sottwell.com
                    Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                    Join the Slack Community - http://modx.org
                    • 38094
                    • 15 Posts
                    blueweb Reply #9, 12 years, 4 months ago
                    Yes it does! As soon as the jQuery is deactivated, the content of the containers will show.

                    The menu has to be an accordion, so the site navigation and design matches the webshop.

                    I think the problem is within the jQuery, but I can't seem to find a way around it!

                    Here is the code:

                    Template:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>[[*pagetitle]]</title>
<meta name="description" content="[[*description]]"/>	

<base href="[[!++site_url]]" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css"  />
<link rel="stylesheet" media="all" type="text/css" href="assets/css/acc.css" />

<script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="assets/js/menu.js" type="text/javascript"></script>



<link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/index.css" type="text/css" />
<link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/jquery-ui-1.8.16.custom.css" type="text/css" />
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/discuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shCore.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shAutoloader.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shDiscuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.sticky.js"></script>
<script type="text/javascript">// <![CDATA[
DIS.url = "/";DIS.shJsUrl = "http://modx.com/assets/components/discuss/themes/modx/js/sh/";DIS.config.connector = "http://modx.com/assets/components/discuss/connector.php"
// ]]></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.modify.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.buttons.js"></script>
</head>
<body>

<div id="header">
<div id="logo"> </div>	
 	
</div>
<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1">
				<!-- Column 1 start -->
  [[Breadcrumbs? &crumbSeparator=`»`]] 	
				[[*content]]
 
				<!-- Column 1 end -->
			</div>
			<div class="col2">
<!-- Column 2 start -->
[[!SimpleSearchForm? &landing=`29` &tpl=`mysearchForm`]]			

<div class="menu">
[[Wayfinder? &startId=`0` &outerTpl=`acc-outer` &hereClass=`expand` &selfClass=`active` 

&categoryFoldersTpl=`acc-folder` &innerTpl=`acc-inner`]]

</div>
 

				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
				
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>
<div class="colmask fullpage">
	<div class="col1">
		<!-- Column 1 start -->
		
		<!-- Column 1 end -->
  </div>
</div>
<div id="footer">
	
</div>
<script type="text/javascript">
        var DISModifyPost = $(function() {
            DIS.config.attachments_max_per_post = 5;
            DIS.DISModifyPost.init({
                attachments: 1
            });
        });</script>
</body>
</html>


                    Chunks:

                    
Acc-folder:


<li [[+wf.classes]]>
   <a title="[[+wf.title]]" href="#">[[+wf.linktext]]  »</a>
   [[+wf.wrapper]]
</li>

Acc-inner:


<ul class="acitem collapsible">
   [[+wf.wrapper]]
</ul>


Acc-outer:

<ul class="menu collapsible">
   [[+wf.wrapper]]
</ul>



                    CSS:

                    .menu {
	height: auto;
	
}

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  
}

ul.menu a {
  display: block;
  text-decoration: none;
background-color:#E0E9F6;
 color: #F00;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;	
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a {
 background-color:#E0E9F6;
  color: #000;	
  padding: 0.5em;
}

ul.menu li a:hover {
  background-color:#E0E9F6;
color:#007AC3;
}

ul.menu li ul li a {
 background-color:#FFF;
  color: #000;

	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

ul.menu li ul li a:hover {
  background-color:#FFF;
  color:#007AC3;
}

.first expand active {
 background-color:#FFF;
  color:#007AC3;
}
/* second level active */
ul.menu li ul li.active a {
     background-color:#FFF;
  color:#007AC3;
}
/* third level active */
ul.menu li ul li ul li.active a {
    background-color:#FFF;
  color:#007AC3;
    }
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #E0E9F6; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }


                    JS:

                    jQuery.fn.initMenu = function() {  
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = $(this).next();
                var parent = this.parentNode.parentNode;
                if($(parent).hasClass('noaccordion')) {
                    if(theElement[0] === undefined) {
                        window.location.href = this.href;
                    }
                    $(theElement).slideToggle('normal', function() {
                        if ($(this).is(':visible')) {
                            $(this).prev().addClass('active');
                        }
                        else {
                            $(this).prev().removeClass('active');
                        }    
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                        if($(parent).hasClass('collapsible')) {
                            $('.acitem:visible', parent).first().slideUp('normal', 
                            function() {
                                $(this).prev().removeClass('active');
                            }
                        );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    $('.acitem:visible', parent).first().slideUp('normal', function() {
                        $(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        $(this).prev().addClass('active');
                    });
                    return false;
                }
            }
        }
    );
});
};

$(document).ready(function() {$('.menu').initMenu();});
                    [ed. note: blueweb last edited this post 12 years, 4 months ago.]
                      • 38094
                      • 15 Posts
                      blueweb Reply #10, 12 years, 4 months ago
                      By the way! Here is a link to the testsite: bluewebcon.com