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}"/ ><span id="article_title"></span></b> <c:if test="${!empty requestScope.AUTHORS}"> <br/>By: <c:forEach items="$ {requestScope.AUTHORS}" var="author" varStatus ="authorStatus"><c:if test="${authorStatus.count > 1 }"><c:choose><c:when test="$ {authorStatus.last && (author['NAME'] != 'editors') && (author ['NAME'] !='editor') && (author['NAME']!='et.al') }"> and </ c:when><c:when test="${not authorStatus.first}">, </c:when></ c:choose></c:if><c:choose><c:when test="${author['NAME'] eq 'editors'}">editors</c:when><c:when test="${author['NAME'] eq 'editor'}">editor</c:when><c:when test="${author['NAME'] eq 'et.al'}">et. al.</c:when><c:otherwise><span class="upperCaseFont"><c:out value="${author['NAME']}" escapeXml="false" /></span></c:otherwise></c:choose></c:forEach> </c:if> <c:if test="${!empty requestScope.product ['JOURNALTITLE']}"> <br/>Published In: <c:out value="$ {requestScope.product['JOURNALTITLE']}" escapeXml="false"/><c:if test="${!empty requestScope.product['JOURNALVOLUME']}">, <span style="white-space : nowrap;"><c:out value="${requestScope.product ['JOURNALVOLUME']}" escapeXml="false"/><c:if test="${!empty requestScope.product['JOURNALNUMBER']}">(<c:out value="$ {requestScope.product['JOURNALNUMBER']}" escapeXml="false"/>)</ c:if><c:if test="${!empty requestScope.product['PAGESTART']}">, pp. <c:out value="${requestScope.product['PAGESTART']}" escapeXml="false"/ ><c:if test="${!empty requestScope.product['PAGEEND']}"><c:if test="${! empty requestScope.product['PAGESTART']}">-</c:if><c:out value="$ {requestScope.product['PAGEEND']}" escapeXml="false"/></c:if></c:if></ c:if></span> </c:if> </td> <td colspan="2">Quantity<br/><input name="< %=OrderBean.PREFIX%><c:out value="${requestScope.product ['PRODUCTID']}" />" type="text" size="1" maxlength="3" id="ord_quantity" value="1"></td> </tr> </table> </div> -- You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-...@googlegroups.com. To unsubscribe from this group, send email to jquery-dev+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=.