Show hide div from xml row id

[ajsfullhouse]

I have a div with an id of innerHTML that I have populated with {description} from my xml file that I am trying to show/hide. The problem that I am running into is that I can get the first one to close but the other six close the first because they do not recognize each as a new div id due to the xml repeat. I have read many different tutorials on how to do this with one or many seperate div id names through an array. I however can not find something to inlighten me on how to do this with the dataset repeat. Could someone please give me a hand. Here is a link to the page I am working with if it helps http://agiworldwide.ajsfullhouse.com/industry.cfm if you click on the Read More link you will see what I am trying to do.

[codeexploiter]

There is some issues in your way of assigning the "id" value for different HTML elements. You have used the same kind of "id" again and again in the same page, which created the issue.

I've made some changes for your page that are following:

I have changed one of your existing function and added an event in your page

//Codex modified the function
function effectSlide(targetElement, duration, from, to, toggle, obj){
	Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
	
	if(obj && obj.innerHTML.toLowerCase() === 'read more'){
			obj.innerHTML = 'Collase';
	}else if(obj){
			obj.innerHTML = 'Read More';
	}
}


//Codex added the window's onload event.
window.onload = function(){
	effectSlide('innerHTML1', 1000, '100%', '0%', true);
	effectSlide('innerHTML2', 1000, '100%', '0%', true);
	effectSlide('innerHTML3', 1000, '100%', '0%', true);
	effectSlide('innerHTML4', 1000, '100%', '0%', true);
}

Changed the following markup sections:

(a) First section

<div id="read_more1">
		              
		              <a href="#" onclick="effectSlide('innerHTML1', 1000, '100%', '0%', true, this);">Read More</a>
		          </div>
		            <br class="clearfloat">
		            </div>
				        <br class="clearfloat">
		          </div>
			        <div id="innerHTML1">
			          <div id="myInnerHTML1">
As one of the primary industry focal points of AGI Worldwide, Inc. we
have built substantial expertise and successful experiences with a wide
range of Retail clients. Our approach to specialization within the
retail industry creates an environment in which we maintain deep
knowledge and capability within the domain. This allows us to offer our
clients best in breed solutions second to none. </div></div>

(b) Second section

<div id="read_more2">
		              
		              <a href="#" onclick="effectSlide('innerHTML2', 1000, '100%', '0%', true,this)">Read More</a>
		          </div>
<div id="innerHTML2">
			          <div id="myInnerHTML2"> <p>This
unique environment calls for Warehouse Management Solution to
effectively handle both areas as well as the transition between them.</p>
		<p>The
capability to handle these unique requirements combined with the
standard quality and efficiency features of the core WMS enable AGI to
meet the diverse and challenging needs of manufactures at a value
centric cost.</p>
		<p><strong>Key Features:</strong></p>
		 <ul>
		 <li>Raw Materials and Finished goods classification and handling.</li>
		 <li>Extensive Lot, Serial, Temperature, Hazmat, and other characteristic capabilities</li>
		 <li>Transitional process for Raw Materials backfill and Finished goods creation.</li>
		 <li>Drop Ship and Make To Order Processing</li>
		 <li>Highly Flexible Allocation and Release options</li>
		 <li>Wide
Range of Pick Processes including pick to tote, pick to carton, case,
pallet, multi Order, Summary, Bulk, Zone, and Priority</li>
		 <li>UCC and ASN compliance</li>
		 <li>Value Added Services Support</li>
		 <li>Highly configurable QA inbound and outbound processes</li>
		 </ul>
</div></div>

(c) Third section

<div id="read_more3">
		              
		              <a href="#" onclick="effectSlide('innerHTML3', 1000, '100%', '0%', true,this)">Read More</a>
		          </div>
<div id="innerHTML3">
			          <div id="myInnerHTML3"> 
		<p>AGI
Worldwide has the background and expertise to maximize your investment
and value in a technology solution and the industry know how to ensure </p>
		<p>The
AGI WMS with 3PL is the right solution for warehouse fulfillment
operations and managing your distribution centers or multi-warehouses.
Automated EDI, XML, and ASCII file options are available for
communications to the outside world, as well as built-in automated
email functions. There is a fully integrated Parcel Shipping option
that allows for parcel shipping (UPS, FedEx, Airborne, USPS, LTL, etc.)
and packing verification. The AGI WMS is 100% WEB based and allows web
interface for your 3PL clients.</p>
		<p><strong>Features:</strong></p>
		<ul>
			<li>Product Ownership by Customer</li>
			<li>Multi Warehouse Management</li>
			<li>Bin Locator Enhancements by Customer</li>
			<li>Customer Preferences (Carriers, Reporting, Shared Data, Frequency)</li>
			<li>Task Workflows based on Customer &amp; His Product's Requirement</li>
			<li>Contract Billing that is robust.</li>
			<li>Computations &amp; entry of manual tasks, automated tasks, &amp; storage.</li>
			<li>EDI &amp; XML data transactions to/from customer &amp; his trading partners</li>
			<li>Visibility of Customers Inventory, Inbound/Outbound Shipments.</li>
			<li>Visibility of Customers Inventory to His Customer</li>
			<li>Web based Order Entry System</li>
			<li>Transportation Management System for Planning, Routing, Parcel, LTL, TL</li>
			<li>Standard Interfaces to small to midsize ERP players</li>
		</ul>
		<p><strong>Accurate, Automated Customer Billing</strong><br>
At the end of each billing period, storage and/or handling fees can be
automatically calculated and presented to either your existing
invoicing system, or our optional Invoicing Module. Either way, your
customers are provided with detailed information about everything that
has transpired with their inventory during the billing period. Weights
handled, pallets received, storage space held, products shipped, items
moved, and much more are all billable entities and can be calculated
based on the rates you establish for each customer.</p>
		<p><strong>Supply Chain Visibility</strong><br>
The AGI WMS provides a real-time connection from the warehouse floor to
your business host. From there, this information can be made available
to your customers, suppliers, or anyone else in the supply chain
through a variety of ways including XML, EDI, e-mail and/or fax
communications. Furthermore, a standard internet connection can be used
for a password protected viewing of inventory availability, order
entry, order editing, and order status inquiries. In addition, you can
administer various levels of client users to even allow certain client
users to administer themselves - all via the web interface.</p>
		  
		</div></div>

(d) Fourth section

<div id="read_more4">
		              
		              <a href="#" onclick="effectSlide('innerHTML4', 1000, '100%', '0%', true,this)">Read More</a>
		          </div>
<div id="innerHTML4">
			          <div id="myInnerHTML4"> <p>Strict
retail compliance is also a significant factor for apparel distributors
and manufactures in the areas of appropriate labeling, ASN transmittal,
and alignment with specified shipping windows common to this industry.</p>
		<p>Combined
with the typical requirements for order processing and picking speed,
high quality accuracy of shipments, and flexibility for varying
customer demands AGI’s Warehouse Management Solution for Apparel
delivers a perfect fit solution at a value centric cost.</p>
		<p><strong>Key Features:</strong></p>
		<ul>
			<li>Wide range of SKU characteristics including Style, Size, Color, Cut, Lot, GOH, and Dimension</li>
			<li>Demand Replenishment and Optimal Slotting</li>
			<li>Drop Ship and Make To Order Processing</li>
			<li>Highly Flexible Allocation and Release options</li>
			<li>Wide Range of Pick Processes including pick to tote, pick to carton, pallet, multi Order, Summary, Bulk, Zone, and Priority</li>
			<li>UCC and ASN compliance</li>
			<li>Value Added Services Support</li>
			<li>Highly configurable QA inbound and outbound processes</li>
		</ul> 
		</div></div>

I hope you can find the changes I've made (highlighted ones) and if you make this much changes it will start to work as you want.

hope this helps.

[ajsfullhouse]

That would work if I was using static information to populate the page I could use an something like what you have posted.

But on my end it looks like this before the page loads.

<div id="innerHTML">
<div id="myInnerHTML">{description}</div>
</div>

which is the being pulled from a xml datasource that has the following filling the information on the page with a total of seven records.

{picture}
{name}
{summary}
and then {description}

My issue is how to get the rowID from the data set to incorporate into the innerHTML div so that when you click on each Read More button it knows that I am working with that innerHTML{rowID} and opens the correct record. I have seen many different ways to do this with static information but I have not seen anyone say how this is possible with the use of XML.

Thank you for the help codeexploiter I have change the code many times to try and get this to work but I can't figure it out.

[codeexploiter]

What I am saying is you have some items like the following multiple times once your page loads

<div id="innerHTML">
<div id="myInnerHTML">{description}</div>
</div>

I mean HTML elements with an already existing "id" value, which should not be there. Though your page will load fine but the code that works using the "id" of an HTML element will always get only one HTML element everytime. I hope what I've mentioned. You have to make the "id" value unique everytime you use it on different HTML elements.

If you look at your XML you are getting the information through an AJAX call whose result is the information about different item. What you do is get that information into proper div/span elements in your case. If you look at the div/span elements in which you used to insert those data they have same "id" , different sections has the same "id" and that has to be changed.

[ajsfullhouse]

But that is where I am running into the problem is how do I give eash div a different id

[codeexploiter]

But that is where I am running into the problem is how do I give eash div a different id

Why it is not possible. If your HTML element markup is statically developed then it is very simple like use a different "id" for each items.

If it is dynamically generated using scripts then you have to use a logic through which you can have unique "id" value for each item.

As I mentioned earlier even if you give incorrect markup the browser will display the page as if nothing happend. That doesn't mean that you page is technically correct, which is not. In case of JS execution it will start showing the errors one by one.

[ejeaglesct]

What was the solution provided to the above problem? I'm having a similar issue where I have XSLT generating a table from a long list of products in a XML file which I want a DIVs to appear in the middle of the page which are generated from each of the XML products.

I can generate one popup but the others won't appear on click, only the first shows up for each of the links. I know it has to do with the way the DIV is called out, but I'm not sure how to make it work with XSL and XML.