Search code examples
cssasp.nettwitter-bootstrapwebformsdotnetnuke

DNN dynamic CSS class for accordion-style container

I am trying to create a custom DNN module container based on the Bootstrap accordion seen here: http://getbootstrap.com/javascript/#collapse

Here's my code so far:

<%@ Control language="vb" AutoEventWireup="false" Explicit="True"
Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>   

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<dnn:TITLE runat="server" id="dnnTITLE" />
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body" id="ContentPane" runat="server">
</div>
</div>
</div>

It works fine as long as the module with this container is only used once per page, but I will need multiple modules like this on one page. I need a way to make it so collapseOne will change to collapseTwo (and so forth) in the href of the link around the module title, and in the id of the div that's around the ContentPane div. I am pretty new to ASP.net and am just not sure how to do that.

(I would just do all the accordions I need within the content of an HTML Pro module, but I want to use a special third-party module within these accordions.)

Thanks.

Solution

  • You can use the ModuleID

    <div id="collapse<%=ModuleControl.ModuleContext.ModuleId%>" class="panel-collapse collapse">