Jquery hide() is messing up with other html code
All,
Need your help, I would appreciate, your help!
1. I’m hiding some records on page load using jquery, teh result is
displayed under <ul> html tag
2. On page loads, I’m calling jquery to show only first 3 records and
hide rest of them.
3. This is working fine in all browsers
4. The issue is, hide jquery code is also hiding other html tags like
div. I have hyperlinks, in first the result, when user clicks on hyper
link then it should popup a div tag. But it’s not doing in IE but
works in other browsers.
Here is my jquery code.
(function($) {
$.fn.collapsorz = function(options) {
// default settings
var defaults = {
toggle: "> *", // elements inside the object to toggle
minimum: 4, // number to show in collapsed form
showText: "More...", // text for the expand link
hideText: "Less...", // text for the collapse link
linkLocation: "after", // use "after" or "before" to determine
where link displays
defaultState: "collapsed", // use "collapsed" or "expanded" to show
or hide items by default
wrapLink: '' // specify HTML code to wrap around the link
};
var options = $.extend(defaults, options);
return this.each(function() {
var toggleSize = $(options.toggle, this).length;
var optMin = options.minimum;
//Well, I don't know why the toogleSize is different for
different
//browsers(belowe code is easy fix, decrement the toggle size
for mozilla and other, it's hack but it works fine)
if(!$.browser.msie)
{
toggleSize = toggleSize - 1;
optMin = optMin + 2 ;
}
// only execute if there are more than minimum items
if(toggleSize > optMin) {
// setup variables
var $obj = $(this);
var $targets = $(options.toggle, this);
//
hide the items if necessary
if(options.defaultState == "collapsed")
{
$targets.filter(":gt("+(optMin-1)+")").hide;
}
// append/prepend the toggle link to the object
var $toggler = $('<a href="#" class="toggler"></a>');
if(options.linkLocation == "before") {
$obj.before($toggler);
}
else {
$obj.after($toggler);
}
if(options.wrapLink) {
$toggler.wrap(options.wrapLink);
}
// set data, link class, and link text
if(options.defaultState == "expanded")
{
$obj.data("status", "expanded");
$toggler.addClass("expanded");
$toggler.html(options.hideText);
}
else
{
$obj.data("status", "collapsed");
$toggler.addClass("collapsed");
$toggler.html(options.showText);
}
// click actions
$toggler.click(function() {
if($obj.data("status") == "collapsed") {
$targets.filter(":hidden").show();
$toggler.html(options.hideText);
$obj.data("status", "expanded");
}
else if($obj.data("status") == "expanded") {
$targets.filter(":gt("+(optMin-1)+")").hide();
$toggler.html(options.showText);
$obj.data("status", "collapsed");
}
$(this).toggleClass("collapsed").toggleClass("expanded");
return false;
});
}
});
}
})(jQuery);
My html code -
when user clicks on hyper link, then it should popup a below div tag
<ul id="module-full-text-list" class="get-full-text collapsorz">
<a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 1</a>
<a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 2</a>
<a href="javascript:showOrderCart(31198)" id="ocl_31198" >
Item 3</a>
</ul>
<div class="subsection infobubble" style="width:450px; display:none;"
id="ordercartdiv">
<input type="hidden" id="article_id" value="0"/>
<table class="results" border="0" cellpadding="0"
cellspacing="0" width="100%" style="width:100%">
<colgroup class="border"><col width="90%"></colgroup>
<colgroup class=""><col width="5%"></colgroup>
<colgroup class=""><col width="5%"></colgroup>
<tr>
<th class="selected" align="center"><a>Request print
version of this publication</a></th>
<th class="selected"> </th>
<th class="selected"><a style="cursor: pointer;"
onclick="resetForm();"><img src="/images/common/
popup_related_close.png" alt="Close" width="12" height="11"
border="0" /></a></th>
</tr>
<tr>
<td><b><c:out value="${requestScope.productName}"/