Search the Community

Hello everyone.. I am using a toggle effect on divs, what i want is a single code for all divs .. right now i have to write the code multiple times i.e for every div individually . I know it can be achieved by $(this) , but i dont know how, as i am new to jquery. here is my code and its working fine, <div class="tricks_head">First</div> <div id="trick1"></div> <div class="tricks_head2">second</div> <div id="trick2"></div> <div class="tricks_head3">third</div> <div id="trick3"></div> <script type="text/javascript"> $( ".tricks_head" ).click(function() { $( "#trick1" ).toggle('slow'); }); $( ".tricks_head2" ).click(function() { $( "#trick2" ).toggle('slow'); }); $( ".tricks_head3" ).click(function() { $( "#trick3" ).toggle('slow'); }); </div> In my project i have 50 div , so can't write it 50 times.. so any help please ?

Here is a snippet of the code for an assignment for my web programming class. I have to use PHP and JQuery to read a delimited text file and display the products in one row of a table. I have to use JQuery's toggle function to be able to show/hide details (price, image, and name) of a few products. Everything seemed to work until I started entering the JQuery code in the division. I have to use $productId as the id for the <div> and I seem to be having some trouble passing the variables to JQuery. I would appreciate any help anyone could offer as I'm at an impasse. I've attached a screenshot of the desired outcome. Thank you. echo "<h3>OUR PRODUCTS</h3>"; echo "<form name=\"shoppingCart\" action=\"checkOut.php\" method=\"post\"> <input type=\"button\" value=\"CHECK OUT\" onclick=\"document.shoppingCart.submit()\"> <input type=\"button\" value=\"MAIN MENU\" onclick=\"location='/'\"> <!--For aesthetic purposes only--> <button type=\"button\">INSTRUCTIONS</button> </form>"; echo "<p>Click a product name for details and to order it. After selecting products click CHECK OUT.</p>"; echo "<table>"; echo "<tr>";// open data file in read only mode $productsData = fopen("products.txt","r");// parse file in while loop and generate product info while(!feof($productsData)) { $row=fgets($productsData); $row=trim($row); $productArray = explode("^",$row); $productId = $productArray[0]; $productName = $productArray[1]; $productPrice = $productArray[2]; $productImageUrl = $productArray[3]; echo "<td width=\"220\" valign='top'>"; echo "<span style=\"font-weight: bold; font-size: 20px;\" onclick=\"$('#$productId').animate({height: 'toggle'}, 'slow' );\">$productName</span>"; echo "</td>"; echo "<td valign='top'> <div id=\"<?php echo($productId); ?>\" style=\"padding: 10px; display: none; font-weight: bold;\"> <img style=\"width: 200px;\" src=\"<?php echo($productImageUrl); ?>\"> <br> Send me: <select name=\"<?php echo($productId); ?>\"> <option value=\"0\">None</option> <option value=\"1\">1</option> <option value=\"2\">2</option> <option value=\"3\">3</option> </select> </div>"; echo "</td>"; };// close data file fclose($productsData);echo "</tr>"; echo "</table>";

I've got some code that will toggle items on and off, and all works. However, I have 4 items that are clickable, and whichever is clicked, the div field for that item opens in the same area of the sacreen. Therefore, when one of the items is clicked, anything else open needs to close, or they stack on top of each other. I cannot figure out how to get any other items to close when a new one is clicked. Here are the elements I'm using right now: CSS: .unhidden { background-color: #ff0000; height: 190px; width: 300px;} .hidden { visibility: hidden;} JS: <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> HTML DIV that is clicked: <div><a href="javascript:unhide('ONE');" >ONE</a></div> <div id="ONE" class="hidden">Text that only shows up when ONE is clicked.</div> <div><a href="javascript:unhide('TWO');" >TWO</a></div> <div id="TWO" class="hidden">Text that only shows up when TWO is clicked.</div> <div><a href="javascript:unhide('THREE');" >THREE</a></div> <div id="THREE" class="hidden">Text that only shows up when THREE is clicked.</div> <div><a href="javascript:unhide('FOUR');" >FOUR</a></div> <div id="FOUR" class="hidden">Text that only shows up when FOUR is clicked.</div> I've tried several variations (creating new functions, each that would hide the previous item when clicked), or adding condiitons to the existing JS to hide the others. I'm somewhat of a JS newb, and I could figure this out if it were PHP, but i don't use JS much. This particular task requires JS. Any ideas how to modify what I'm using to work? Thanks in advance.

I'm using a spry dataset to view data off an .xml file for an online store. There's your basic stuff, picture link, headline, price, description, item number etc. The description set can vary as descriptions do with different items I'd like to only show the first few lines (140 characters or something) of the description upon load and then allow the visitor to toggle open the rest of the description. Is there a way to do that? Here is the code I'm currently using, just your basic dreamweaver insert. <div spry:region="catalog" class="SpotlightAndStacked"> <div spry:repeat="catalog" class="SpotlightAndStackedRow"> <div class="SpotlightContainer"> <div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title=" {Headline}"><img src="_images/catalog/thumbs/Art/{Thumbnail}"></a></div> </div> <div class="StackedContainer"> <div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div> <div class="StackedColumn"> {Item_Code_Number}</div> <div class="StackedColumn"> {Headline}</div> <div class="StackedColumn"> {Complete_Description}</div> <div class="StackedColumn"> {Item_Code_Number}</div> <div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong></div> </div> <br style="clear:both; line-height: 0px" /> </div> </div> my friend gave me this code but doesn't seem to work: <div spry:region="catalog" class="SpotlightAndStacked"> <div spry:repeat="catalog" class="SpotlightAndStackedRow"> <div class="SpotlightContainer"> <div class="SpotlightColumn"><a href="_images/catalog/Art/{Picture_File}" title=" {Headline}"><img src="_images/catalog/thumbs/Art/{Thumbnail}"></a></div> </div> <div class="StackedContainer"> <a href="#">Show Description</a> <div class="StackedInner" style="display:none"> <div class="StackedColumn"> {Item_Last_Name}, {Item_First_Name}</div> <div class="StackedColumn"> {Item_Code_Number}</div> <div class="StackedColumn"> {Headline}</div> <div class="StackedColumn"> {Complete_Description}</div> <div class="StackedColumn"> {Item_Code_Number}</div> <div class="StackedColumn"> <strong>Retail price: {Retail_Price}</strong> </div> </div> </div> <br style="clear:both; line-height: 0px" /> </div> </div> Jquery $(document).ready(function(){ $('.StackedContainer a').on('click',function(event){ event.preventDefault(); // prevent the link from any action var thisBtn = $(this); // cache thisBtn.parent().find('.StackedInner').toggle(); // toggle the description }); // close on click })