window appears

[Mobos]

Hi everybody!

I have a question about an issue .... EVISSI :: Pure Coconut Water under each can I want some information (nutrition facts, etc.) to appear when the visitor clicks on a link or a small image.

I tried it with accordion, but it isn't closed as default (?) and I can't put it under each can (horizontal) because accordion is vertical. Isn't it????

Someone suggested a modal window, but mostly that is 'over' the page.

It has to be something like this ..... C2O

[osgood_]

Put your product images and product information in a div container with the class of 'products_wrapper' as below. This has been inserted between the 2 divs which presumably are the green lines spanning the browser window with - <div class="fluid BackAloe"></div>        <div class="fluid BackAloe"></div>

(Take note a 'class' and a 'data-img' attribute has been added to each image as shown in red below)

<div class="fluid BackAloe"></div>

<div class="products_wrapper">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3><a href="#">Sectie 2</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3><a href="#">Sectie 3</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

<div class="fluid BackAloe"></div>

Below is the jQuery to show and hide the product information <divs>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();   

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

});

});

</script>

Below is the css to style the products_wrapper and products_info divs:

.products_wrapper {

width: 70%;

margin: 0 auto;

}

.product_info {

border: 1px solid #333;

padding: 30px;

margin: 30px 0;

}

[Mobos]

Heeee, this looks nice, thanks!!! EVISSI :: Pure Coconut Water

Can there also be a possibility to close the dive when clicked on a 'close' button?

[osgood_]

Yes, add your closing trigger inside the parent product_info div:

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

Then add the jQuery to the existing script:

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide(); 

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

});

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

</script>

[Mobos]

YEP!!

One more thing to go ..... at the second can I put two more div's (close is also in a div to align right, that went well), but now the whole thing 'breaks out' of the original product_info div !!!

[osgood_]

Mobos  wrote

YEP!!

One more thing to go ..... at the second can I put two more div's (close is also in a div to align right, that went well), but now the whole thing 'breaks out' of the original product_info div !!!

Not really sure what you mean, can you upload a new vesrion so I can see what is going on. If coded correctly you can just add the 2nd and 3rd closing <divs> in their containers (see below)

Then if you want to position the closing icon to the right make the .product_info container have a position of relative and the close_product_info container have a position of absolute:

.product_info {

border: 1px solid #333;

padding: 30px;

margin: 30px 0;

position: relative;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

<div class="products_wrapper">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

<div id="product_1" class="product_info">

<h3><a href="#">Sectie 1</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3><a href="#">Sectie 2</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3><a href="#">Sectie 3</a></h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

[Mobos]

EVISSI :: Pure Coconut Water   The middle can

[Mobos]

Yes, I managed the close button on top, right .....

[osgood_]

Mobos  wrote

Yes, I managed the close button on top, right .....

add

overflow: hidden;

to .product_info css selector:

.product_info {

overflow: hidden;

}

[Mobos]

Ahaaaa, perfect!

Thanks so far for all your help.   I hope this will be o.k., otherwise I'll be back .....

[Mobos]

Haaaaa, still have an other question ..... on mobile devices the cans EVISSI :: Pure Coconut Water Natural, Pineapple & Mango  go under eachother. But if you click on the plus the window with nutrition facts opens not under the can but under the be lowest can.

Is there a solution??

[osgood_ · Accepted solution]

Flexbox 'order' can re-order the position of the images and product_info divs:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Untitled Document</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

$('#product_1, #product_2, #product_3').hide();  

$('.product').click(function(){

var product = $(this).attr('data-img');

$('.product_info').hide();

$(product).slideToggle();

$('.close_product_info').css('cursor' , 'pointer').click(function(){

$(this).parent('div').slideUp();

});

});

});

</script>

<style>

.products_wrapper {

display: flex;

justify-content: center;

flex-wrap: wrap;

width: 70%;

margin: 0 auto;

text-align: center;

}

.product_info {

position: relative;

border: 1px solid #999;

padding: 25px;

width: 100%;

}

.close_product_info {

position: absolute;

right: 0;

top: 0;

}

@media screen and (max-width: 768px) {

.products_wrapper {

width: 90%;

}

.product_image_1 {

width: 100%;

order: 1;

}

#product_1 {

width: 100%;

order: 2;

}

.product_image_2 {

width: 100%;

order: 3;

}

#product_2 {

width: 100%;

order: 4;

}

.product_image_3 {

width: 100%;

order: 5;

}

#product_3 {

width: 100%;

order: 6;

}  

    }

</style>

</head>

<body>

<div class="products_wrapper">

<div class="product_image_1">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_1" alt="aloe vera juice"/>

</div>

<div class="product_image_2">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_2" alt="aloe vera juice"/>

</div>

<div class="product_image_3">

<img src="http://evissi.com/imgs/can-aloe.png" class="product" data-img="#product_3" alt="aloe vera juice"/>

</div>

<div id="product_1" class="product_info">

<h3>Sectie 1</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_1 -->

<div id="product_2" class="product_info">

<h3>Sectie 2</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_2 -->

<div id="product_3" class="product_info">

<h3>Sectie 3</h3>

<p>Aliquam rhoncus turpis ipsum, quis lobortis nulla malesuada et. Morbi fringilla laoreet leo, sit amet aliquam quam lacinia dictum. Aenean pellentesque, libero at consequat porttitor, nibh enim auctor mauris, eget efficitur ex leo ut enim. Curabitur tempor eget quam non rhoncus. Pellentesque commodo elit lacus, at efficitur sapien maximus sit amet.</p>

<div class="close_product_info">Close</div>

</div>

<!-- end product_3 -->

</div>

<!-- end products_wrapper -->

</body>

</html>

[Mobos]

That looks great Osgood!!

(although the close-button is now close to the edge, but that's not the biggest problem)

Thanks for all your help here, it's priceless!!!

(Well, apart from my monthly payment for the whole Adobe package, hihi)

[Mobos]

Sorry, forgot the link ..... EVISSI :: Pure Coconut Water Natural, Pineapple & Mango

[osgood_]

Mobos  wrote

Sorry, forgot the link ..... EVISSI :: Pure Coconut Water Natural, Pineapple & Mango

Looks good.