jQuery accordion revo - show the cotents of container documents

15 Posts

blueweb Reply #1, 14 years, 9 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!

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 14 years, 9 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

15 Posts

blueweb Reply #3, 14 years, 9 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!

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 14 years, 9 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

15 Posts

blueweb Reply #5, 14 years, 9 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!

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 14 years, 9 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

15 Posts

blueweb Reply #7, 14 years, 9 months ago

Sorry I don't think I made myself clear. To illustrate my problem in detail, I attached a screenshot...

Thank you!

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 14 years, 9 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 14 years, 9 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

15 Posts

blueweb Reply #9, 14 years, 9 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 14 years, 9 months ago.]

15 Posts

blueweb Reply #10, 14 years, 9 months ago

By the way! Here is a link to the testsite: bluewebcon.com