php - I have a catalog of 24 items, when one item is clicked, I want to hide 23 items and show more information on the selected item -
this sounds simpler is. cannot amend dom using jquery because each item , details populated database using php.
what want in theory simple yet cannot accomplish it. example want is:
if item 1001 clicked hide other items , show more detailed information on item 1001.
this second time have looked assistance in matter, seems nobody has answer problem. have rephrased question , trying again , appreciate @ all. if can point me in right direction , go research it. tbh have absolutely no idea begin.
thanks
<script> $(".1001").click(function(){ $("#images1").remove(); $("#images2").show(); }); </script> <section class="cataloglisting"> <?php $load_content->load_content("1001");?> <div class="dresses"> <a class="1001" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?><br />was:<strike>£175.00</strike></p> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1002");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?><br />was:<strike>£150.00</strike></p> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1003");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?><br />was:<strike>£150.00</strike></p> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1004");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1005");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?><br />was:<strike>£150.00</strike></p> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1006");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1007");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1008");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1009");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> </section><!---end of first 9 items---> <section id="secondnineitems"> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1010");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1011");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1012");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1013");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <!---items class "tunics" below---> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1014");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1015");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <!---items class "tops" below---> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1016");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1017");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1018");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> </section><!---end of second 9 items---> <section id="thirdnineitems"> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1019");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1020");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1021");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1022");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1023");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> </div> </section> <section class="cataloglisting"> <div class="dresses"> <?php $load_content->load_content("1024");?> <a class="a3" href="#"> <figure><img src="<?php echo $load_content->getimgmedium();?>" /></figure> <p class="listing"><?php echo $load_content->gettitle();?></p></a> <p class="listingsub">artist:<?php echo $load_content->getartist();?> <p class="p4"><strong>now: £<span class="price"><?php echo $load_content->getprice();?></span></strong></p> <p class="p4"><font>out of stock</font></p> </div> </section> </section><!---end of third 9 items---> </article><!---end of article:shopcontent---> </article><!---end of article:shopwrapper---> </article><!---end of article:main---> <!---main content area clothes---> <article id="clothes1"> <p class="p2"><a href="index.php" class="a2">home ></a> <a href="shop.php" class="a2">shop ></a> <strong>clothes 1</strong></p> <!--- load images ---> <section id="images1" style="width:400px; float:left; height:auto;"> <p><?php $load_content->load_content('1002');?></p> <a href="<?php echo $load_content->getimglarge1();?>" class="zoom"> <img src="<?php echo $load_content->getimglarge1();?>" width="375" height="568" alt="arrows"></a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall1();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall2();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall3();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall4();?>" width="64" height="100"/> </a> </section> <!--- load images ---> <section id="images2" style="width:400px; float:left; height:auto;"> <p><?php $load_content->load_content('1001');?></p> <a href="<?php echo $load_content->getimglarge1();?>" class="zoom"> <img src="<?php echo $load_content->getimglarge1();?>" width="375" height="568" alt="arrows"></a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall1();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall2();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall3();?>" width="64" height="100"/> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="<?php echo $load_content->getimgsmall4();?>" width="64" height="100"/> </a> </section> php generated html code:
<section id="images2" style="width:400px; float:left; height:auto;"> <p></p> <a href="images/catalog/largest/aof_14102_amorous_arrows.jpg" class="zoom"> <img src="images/catalog/largest/aof_14102_amorous_arrows.jpg" width="375" height="568" alt="arrows"></a> <a href="#"> <img class="thumbnails" title="click enlarge" src="images/catalog/small/aof_14102_amorous_arrows.jpg" width="64" height="100"> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="images/catalog/small/aof_14175_amorous_arrows_side_back_view.jpg" width="64" height="100"> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="images/catalog/small/aof_14077_amorous_arrows_other_view.jpg" width="64" height="100"> </a> <a href="#"> <img class="thumbnails" title="click enlarge" src="images/catalog/small/amorous_arrows.jpg" width="64" height="100"> </a> </section>
create list items special css class 'hideable' in outermost divs.
load items, , include the'more details' data in separate div style property 'visibility: hidden'.
when 1 item checked, use jquery select items class 'hideable' , cycle through them, setting visibility hidden.
finally set visibility visible on clicked item , it's 'more data' div.
Comments
Post a Comment