Trying to add custom jquery code to the home page text area for bootstrap accordions
Posted: Fri Sep 18, 2020 7:56 am
Working on the home page of an Able Commerce site and trying to incorporate some jquery javascript to allow certain divs to open/close on the home page. Below is the code that does not seem to fire even though i have created a custom script and added calls to it in base.master.
$(document).ready(function(){
$('.collapse.in').each(function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
});
Here is the base.master
using System.Web.UI;
public partial class Base : System.Web.UI.MasterPage
{
protected void Page_Init(object sender, EventArgs e)
{
if (ScriptsPh != null)
{
// insert necessary javascripts
string scriptTag = "<script src=\"{0}\" type=\"text/javascript\"></script>";
string jquery = Page.ResolveUrl("~/Scripts/jquery-1.10.2.min.js");
string jqueryUI = Page.ResolveUrl("~/Scripts/jquery-ui.min.js");
string equalHeightsUrl = Page.ResolveUrl("~/Scripts/jquery.equalheights.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jquery)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUI)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, equalHeightsUrl)));
if (AbleCommerce.Code.PageHelper.IsResponsiveTheme(this.Page))
{
string footable = Page.ResolveUrl("~/Scripts/footable.js");
string bootstrap = Page.ResolveUrl("~/Scripts/bootstrap.min.js");
string collapsible = Page.ResolveUrl("~/Scripts/A3/A3Collapsibles.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, footable)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, bootstrap)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible)));
}
}
}
}
What is the best way to add this type of behavior to the home page?
Thanks in advance for the help.
Rich
$(document).ready(function(){
$('.collapse.in').each(function(){
$(this).parent().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
});
Here is the base.master
using System.Web.UI;
public partial class Base : System.Web.UI.MasterPage
{
protected void Page_Init(object sender, EventArgs e)
{
if (ScriptsPh != null)
{
// insert necessary javascripts
string scriptTag = "<script src=\"{0}\" type=\"text/javascript\"></script>";
string jquery = Page.ResolveUrl("~/Scripts/jquery-1.10.2.min.js");
string jqueryUI = Page.ResolveUrl("~/Scripts/jquery-ui.min.js");
string equalHeightsUrl = Page.ResolveUrl("~/Scripts/jquery.equalheights.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jquery)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUI)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, equalHeightsUrl)));
if (AbleCommerce.Code.PageHelper.IsResponsiveTheme(this.Page))
{
string footable = Page.ResolveUrl("~/Scripts/footable.js");
string bootstrap = Page.ResolveUrl("~/Scripts/bootstrap.min.js");
string collapsible = Page.ResolveUrl("~/Scripts/A3/A3Collapsibles.js");
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, footable)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, bootstrap)));
ScriptsPh.Controls.Add(new LiteralControl(string.Format(scriptTag, collapsible)));
}
}
}
}
What is the best way to add this type of behavior to the home page?
Thanks in advance for the help.
Rich