How to show a div with java script

Question

I have a simple problem. I need to use php which will generate products on a page. When the user clicks on quick look, it should popup a window and show some product information. I can only do this two ways: first, generate a popup div for each product. Second, generate only one basic pop-up and fill in data from the product. Now I have the second version:

This is the div:

<div class="fixedModalQuickLook">
        <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
        <div class="innerModalQuickLook">
            <div class="shortInfoItemInfo visible-xs col-xs-12">
                <h2><a href="#" title="">  do</a></h2>
            </div>
            <div class="containerImg-Social col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="imgWishListItem ">
                    <a href="#" title="">
                        <img src="images/gallery/carti2.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="shareItem ">
                    <ul>
                        <li><a href="#" title=""><i class="fa fa-facebook"></i></a> </li>
                        <li><a href="#" title=""><i class="fa fa-google-plus"></i></a> </li>
                        <li><a href="#" title=""><i class="fa fa-twitter"></i></a> </li>
                    </ul>
                </div>
            </div>

            <div class="shortInfoItemInfo col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="buttonCartWishList visible-xs"> <a href="javascript:void(0)" class="addToCartButtonWL"><input type="text" placeholder="1" name="count" /> Add to cart</a></div>
                <h2 class="hidden-xs"><a href="#" title="">  Hiroshige: One Hundred Famous Views of Edo</a></h2>

                <div class="stars"><img src="images/icon/stars-small.png" alt=" " title="" /> </div>
                <div class="priceQuikLookItem">&#163;30.88</div>
                <div class="buttonCartWishList hidden-xs">
                    <a href="javascript:void(0)" class="addToCartButtonWL">

                        <form class="wrapInput">   <input type="text" placeholder="1" size="1" id="count" onkeypress="this.style.width = ((this.value.length + 12) * 6) + 'px';" /> </form><!--</div>--> Add to cart
                    </a>
                </div>   <!--onkeypress="this.style.width = ((this.value.length + 12) * 9) + 'px';" -->
            </div>

            <div class="stocInfo col-lg-2 col-md-2 col-sm-6 col-xs-12">
                <h5>disponibility</h5>
                <div class="stocNumber"> Stoc:<span>100</span> </div>
                <div class="multipleOptions">
                    <div class="showInfo">
                        <div class="color cyan"></div>
                        <div class="color azure"></div>
                        <div class="color skyBlue"></div> <i class="fa fa-plus"></i>
                    </div>
                    <div class="showPlusInfo">
                        <h6>Colors</h6>
                        <div class="color cyan"></div>
                        <div class="color azure"></div>
                        <div class="color skyBlue"></div>
                        <div class="color phthaloBlue"></div>
                        <div class="color sapphire"></div>
                        <div class="color gold"></div>
                        <div class="color chartreuse"></div>
                        <div class="color jasmine"></div>
                        <div class="color apricot"></div>
                        <div class="color gold"></div>
                        <div class="color chartreuse"></div>
                        <div class="color azure"></div>
                        <div class="color skyBlue"></div>
                        <div class="color phthaloBlue"></div>
                        <div class="color jasmine"></div>
                        <div class="color apricot"></div>
                        <div class="color phthaloBlue"></div>
                        <div class="color sapphire"></div>
                        <div class="color gold"></div>
                        <div class="color chartreuse"></div>
                        <div class="color jasmine"></div>
                        <div class="color apricot"></div>
                        <div class="color gold"></div>
                        <div class="color chartreuse"></div>
                        <div class="color jasmine"></div>
                        <div class="color apricot"></div>
                    </div>
                </div>
                <div class="multipleOptions">
                    <div class="showInfo">shipping<i class="fa fa-plus"></i>  </div>
                    <div class="showPlusInfo">
                        <h6>Shipping</h6>
                        <p>Sed ut perspiciatis unde omnis</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
                    </div>
                </div>
            </div>

            <div class="moreInfo  col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <h5>Short Info</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                <div class="listInfoItem">
                    <ul>
                        <li><strong>Gama:</strong> PowerSeeker<br></li>
                        <li><strong>Design optic:</strong> Refractor<br></li>
                        <li><strong>Nivel:</strong> Incepatori/Copii<br></li>
                        <li><strong>Tip obiectiv:</strong> Acromat<br></li>
                        <li><strong>Computerizat:</strong> Nu<br></li>
                    </ul>
                    <ul>
                        <li><strong>Magnitudine stelara maxima:</strong> 11.1<br></li>
                        <li><strong>Marire teoretica maxima:</strong> 120x<br></li>
                        <li><strong>Diametru (inch):</strong> 50 mm<br></li>
                        <li><strong>Montura:</strong> Altazimutala<br></li>
                        <li><strong>Distanta focala:</strong> 600 mm<br></li>
                    </ul>
                </div>
            </div>

     </div>
 </div>

And with this I show div:

$(".close-quick-look").on("click", function () {
  $(".quickModalCover").css('display', 'none');
  $(".fixedModalQuickLook").css('display', 'none');
});
$(".buttonQuickLook").on("click", function () {
  $(".quickModalCover").css('display', 'block');
  $(".fixedModalQuickLook").css('display', 'block');
  $(".fixedModalQuickLook").css('opacity', '1');
});

I don't know how to show the specific div, for example I will generate:

<div class="fixedModalQuickLook17">
    <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
    <div class="innerModalQuickLook17"></div>
</div>

<div class="fixedModalQuickLook30">
    <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
   <div class="innerModalQuickLook30"></div>
</div>

<div class="fixedModalQuickLook556">
    <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
    <div class="innerModalQuickLook556"></div>
</div>

And how i can modifiy my javascript to detect what i click to show, or how can i make a single div and fill that with my php info. Thanks !

Answer 1

Looking at your live site. I think this would help you.

What are we doing here:

• First reaching the parent element of button. Here li is parent of .buttonQuickLook.
• Now looking for the next element which has class fixedModalQuickLook.
• Finally .addClass('display') which has display:block as property. (Add to your CSS)

Okay almost done here, now this would work. But still one safe sided code line needed.

• Before doing the above thing we will close all Quick Look Modals(which is not necessary, as you need to close prev to open next). But still we will closing them(just in case somehow) by .addClass('display')

Demo : Here i have used a tag as click Listener. Just an example.

Here is the solution:

$('.buttonQuickLook').click(function(e){
   $('.fixedModalQuickLook').removeClass("display");  // Removing all previous one if somehow still open.
   $(this).closest('li').next('.fixedModalQuickLook').toggleClass("display");
});

Add this to your CSS:

.display
{
    display:block;
}

Answer 2

some psuedo code:

<? foreach($products as $product):?>
   <div id ="product_<?=$product->id;?>" onclick="display('product_<?=$product_id;?>'); return false;">
      <div id="header">
         Viewing information for <?=$product->name;?>
      </div>
   </div>
<? endforeach;?>

jquery:

 function hide()
 {
     $('[id^=product_]').hide();
 }

$(document).ready(function() {
        hide();
    });

//displays div passed in 
function display(div_id)
{
   hide();
   $('#'+div_id).fadeIn();
}

Answer 3

It's actually quite simply in jQuery you can easily use the toggle() function to literally change the visibility of any targeted element:

This makes show/hide really easy as the following show.

For example:

HTML

<div class="fixedModalQuickLook">
    <a href="javascript:void(0)" class="close-quick-look">close <i class="fa fa-times"></i></a>
    <div class="innerModalQuickLook">
      <div class="shortInfoItemInfo visible-xs col-xs-12">
        <h2><a href="#" title="">  do</a></h2>
      </div>
    </div>
</div>


  <button>Quick Look</button>

JS

$(".close-quick-look, button").on("click", function() {

  $(".quickModalCover").toggle();
  $(".fixedModalQuickLook").toggle()

})

Here is the full working example: http://jsbin.com/babupucoku/edit?html,js,output

Hope that helps!