Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Modify Container Visbility ButtonModify Container Visbility Button
Previous
 
Next
New Post
11/11/2009 10:48 AM
 

I would like to modify my container so that the title of the text module acts as the visibility minimize/maximize toggle, rather than having that tiny plus/minus button.

Any suggestions? Can that code be customized?

 
New Post
11/11/2009 1:13 PM
 

Thea,

I don't know of anyway to change the behaviour of the built in [TITLE] token so it acts as you're looking, but what you could do is integrate jquery and use a blank container, then deine the title of the content as a H1 in the TEXT/HTML editor. You can then set the title to act as the trigger for collapsing and expanding content, as shown in the accordian example here - http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ . This will only work for TEXT/HTML modules.

That said though, I'm pretty sure with a bit of inginuity you could combine a container and jquery so that the following happens:

  • The entire container is wrapped in a div with a class
  • The [TITLE] element is wrapped in a H1 or H2 element
  • The ContentPane of the container is wrapped in a div that is assigned another class

The jquery code could then be set to look for the H1 or H2 element of the DIV with that specific class, and use that to expand and collapse the ContentPane wrapping div.

This would be a solution if you can get someone to code it out.

Hope this helps,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
New Post
11/12/2009 12:53 PM
 

Thea,

After responding to your thread I thought I'd try out my own suggestion, and it seems to work quite nicely.

The version I came up with was on DNN4 so I had to add a link to the jQuery file through the page settings, as well as adding the the Javascript code for the actions on the container underneath this.

This is how my quick container HTML looks:

<div class="dnncontainer">
[SOLPARTACTIONS]
<h2>[TITLE]</h2>
<div class="containerwrapper">[CONTENTPANE]</div>
</div>

and this is the javascript code:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(".dnncontainer h2").click(function(){
  jQuery(this).next("div.containerwrapper").slideToggle("slow")
  jQuery(this).toggleClass("active");
});
});
</script>

I'm the first to admit this is a very rough container and the transition is slightly jumpy on some browsers (IE mainly), but it's a good starting point in achieving what you're after.

Hope this helps,

Rick.



PSDtoDNN - You supply the artwork... we'll build the skins!™
Website | Twitter | YouTube | Skype
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Modify Container Visbility ButtonModify Container Visbility Button


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out