Hidden Div Creating Extra Line Break

I'm having an issue with a hidden div showing at the very end of a coldfusion loop. What I need is it to show right underneath each individual row. You can see what i'm talking about at the URL below (click on "Learn More" under any one of the 1st four fragrances, you will see that the hidden div shows underneath the Fleur D'Orange fragrance.

http://www.mefragrance.com/shop.cfm?collectionid=4

What I need is for it to show underneath the 1st row of 4 fragrances. I would also need this to show properly in mobile devices. So basically i'm looking for the hidden div to show underneath each individual fragrance, but occupy the full width of a row.

Right now I have the div after the full loop, so I understand why it shows it at the very bottom of all the products. But when I move it underneath or within the product loop, it creates a line break after each fragrance, thus creating a one column row.

Below is the code I've tried, which is basically putting the hidden layer underneath each div (ie under each fragrance), which is what i want. The problem is that instead of the row going 4 divs across, it puts a break after each div and you have just one column all the way down. You can see the result here:

http://www.mefragrance.com/shop_test.cfm?collectionid=4

Here is the code

<style>
#menu_container{
width: auto;
height: auto;
padding-left:50px;
padding-top: 20px; 
}

#menu_container div {display: none;}
</style>

<div style="display: inline-block; padding-left: 15px; ">           
    <div style="text-align: center; padding-top: 25px;">
        <img src="graphics/premixed/jasmin_epice_noir_3.4.jpg" style="max-width: 250px; height: auto;">
    </div>

    <div style="text-align: center; padding-top: 5px; " class="how-it-works-grey">
        Jasmin Épice Noir
    </div>

    <div style="text-align: center; padding-top: 15px; ">                       
        <i class="fa fa-female fa-lg"></i><img src="graphics/sex_quotient_1.png"><i class="fa fa-male fa-lg"></i>
    </div>

    <div style="text-align: center; padding-top: 25px;">
        <a class="greenbutton-42px-high" style="text-decoration:none; min-width: 150px; color: white; " href="shop.cfm?premixedid=4&fullcollection=1&collectionid=4">SHOP PRODUCTS <i class="icon-right-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
    </div>

    <div style="text-align: center; padding-top: 10px; padding-bottom: 0px;">
        <a id="show_4" class="whitebutton-42px-high" style="text-decoration:none; min-width: 150px; " href="javascript:void(0)">LEARN MORE <i class="icon-down-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
    </div>                                      
</div>                  

<!-- Hidden Layer -->   
<div id="menu_container">
    <div id="menu_4" style="padding-top: 10px; padding-bottom:20px;">               
        <p class="how-it-works-grey"><u>Jasmin Épice Noir</u></p>               
        <p style="line-height: 18px; padding-top: 0px;">An irresistible fragrance that is mysterious and intensely voluptuous. A spiced floral fragrance with a precious blend of jasmine grandiflorum absolute and rich spices. A combination of spices such as black pepper & ginger root give this fragrance a spicy mix. Includes accents of almond oil & clary sage essential oil. The fragrance is then rounded out with vanilla essential oil to let the heart notes come through and give it a rich subtle sweet scent.</p>
    </div>
</div>
<!-- End Hidden Layer -->


<script>
$(document).ready(function(){
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide( "slow" ); 
  $("#menu_container #menu_"+id[1]).show( "slow" );
});
});
</script>

Open in new window

seeraigAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Here is what I can see off the top

You have a div with id="menu-container" that contains the hidden layer - there is part of your problem - you are trying to put your hidden layers inside a container that has a unique ID and that is itself not hidden. Look at this style

#menu_container div {display: none;}

This is hiding the div's inside menu-container itself - and not the actual menu container.

It makes sense if you put this at the end of the loop as there can only be one div with an id of menu-container and the hide / show code you have would then work.

Here is where it gets complicated - you want the layer to be below the row that the corresponding item is in - that is fine - except when you go to mobile - as the columns collapse they are going to have to be re-configured so that the hidden div stays below its owner - and not below its group.

Consider this

    A              B             C         D
 Hidden a       Hidden B     Hidden c   Hidden d

Open in new window

No problem. When this collapses
What you get        What you want
A                   A
B                   Hidden a
C                   B
D                   Hidden b
Hidden a            C
Hidden b            Hidden c
Hidden c            D
Hidden d            Hidden D

Open in new window

As you can see from the above when collapsing to mobile you have to change your layout in order to keep the hidden layer showing below its parent. You could do this by including the hidden layer in the cell but then it won't expand to fill the entire row.
To solve this you have two options
1. Change your requirement - so instead of having a hidden div have a popup or redirect to another page
2. Use a javascript solution to re-position the div's to conform to the device it is running on. You could potentially look at Isotope - it might have the functionality to do what you want.
seeraigAuthor Commented:
Hi Justin,

Why is it not possible to have a hidden div beneath each fragrance div (a hidden div that occupies the full width of the row).

I'm not sure how to accomplish it as I'm not that experienced, but it doesn't seem like it should be that complicated or unattainable.
Julian HansenCommented:
Let's look at the markup for that
You are wanting this in the markup
A
Hidden A
B
Hidden B
C
Hidden C

Open in new window

To display like this
A           B                    C                    D
         Hidden B             Hidden C             Hidden D
+-----------------------------------------------------------+
| Hidden A visible                                          |
+-----------------------------------------------------------+

Open in new window

As soon as Hidden A is made visible and full width it will push everything after it to the next line i.e. B, C and D. To get around this you would need to make it absolute positioned relative to the container of the items A - D and make provision for showing it with a margin below the container - so that when it is displayed it is not going to display over text below it. When positioned absolutely it won't push content down when it is displayed so you would need to do that.
To solve this will require some javscript and media queries.

The sample below demonstrates the concept of how potentially to solve this.

Working sample here
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.learnmore {
  display: none;
  width: 100%;
  position: absolute;
  height: 150px;
  bottom: -150px;
  background: #999;
}
.expanded {
  display: block;
}
.makespace {
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .learnmore {
    display: none;
    position: relative;
    width: 100%;
    background: #999;
    bottom: 0;
    clear: both;
  }
  .expanded {
    display: block;
    margin-bottom: 0;
  }
}
</style>
</head>
<body>
<div class="container">
  <div class="row" style="position: relative">
    <div class="col-md-3  col-sm-3 col-xs-12">
      <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum erat ornare, sollicitudin dui vitae, fermentum velit. Integer pellentesque varius mauris, eu dapibus justo facilisis nec. Nunc volutpat metus sem, quis convallis ex laoreet in</p>
      <a href="#cell1" class="learnmorelink">Learn More</a>
    </div>
    <div class="learnmore" id="cell1">In imperdiet vestibulum felis non bibendum. Integer eget maximus mi. Mauris pellentesque luctus dolor. Donec massa arcu, fringilla vitae dui eget, iaculis euismod diam.</div>
    <div class="col-md-3  col-sm-3 col-xs-12">
      <p>Mauris mattis rutrum metus quis pharetra. Phasellus dignissim bibendum fermentum. Cras maximus porttitor eros et volutpat. Pellentesque nec enim vel dolor laoreet volutpat. Aliquam ac commodo lectus. Proin euismod elit eget libero condimentum, eget luctus tortor hendrerit</p>
      <a href="#cell2" class="learnmorelink">Learn More</a>
    </div>
    <div class="learnmore" id="cell2">Nunc volutpat metus sem, quis convallis ex laoreet in. Sed sem mauris, tristique eu nibh sit amet, posuere iaculis mauris. Proin suscipit diam vel ex vulputate finibus. Sed quis malesuada nunc. Pellentesque felis ex, sagittis vel eros ut, accumsan volutpat magna. </div>
    <div class="col-md-3  col-sm-3 col-xs-12">
      <p>In imperdiet vestibulum felis non bibendum. Integer eget maximus mi. Mauris pellentesque luctus dolor. Donec massa arcu, fringilla vitae dui eget, iaculis euismod diam.</p>
      <a href="#cell3" class="learnmorelink">Learn More</a>
    </div>
    <div class="learnmore" id="cell3">Proin euismod elit eget libero condimentum, eget luctus tortor hendrerit. Nullam dictum ipsum in orci efficitur fringilla. Nullam dignissim varius eros, ut hendrerit metus cursus vitae. </div>
    <div class="col-md-3  col-sm-3 col-xs-12">
      <p>In hac habitasse platea dictumst. Praesent ac tempus nisl. Nulla facilisi. Maecenas eu diam pretium, tincidunt ex quis, fringilla quam. Curabitur felis elit, sodales vel turpis vitae, consequat hendrerit enim. Aenean egestas commodo nisl, nec posuere velit semper a.</p>
      <a href="#cell4" class="learnmorelink">Learn More</a>
    </div>
    <div class="learnmore" id="cell4">Vestibulum sit amet augue luctus, fermentum turpis ut, finibus leo. Integer a eros feugiat nibh mollis lacinia. Cras vitae volutpat dui. Nunc tincidunt, purus at aliquet maximus, velit velit sagittis tellus, ac finibus neque felis nec neque. Suspendisse potenti. Suspendisse potenti.</div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin elementum erat ornare, sollicitudin dui vitae, fermentum velit. Integer pellentesque varius mauris, eu dapibus justo facilisis nec. Nunc volutpat metus sem, quis convallis ex laoreet in. Sed sem mauris, tristique eu nibh sit amet, posuere iaculis mauris. Proin suscipit diam vel ex vulputate finibus. Sed quis malesuada nunc. Pellentesque felis ex, sagittis vel eros ut, accumsan volutpat magna.</p>
</div>

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

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
  $('a.learnmorelink').click(function(e) {
    e.preventDefault();
    var hidden = $($(this).attr('href'));
    var parent = $(this).closest('.row');
    if (hidden && hidden.hasClass('expanded')) {
      parent.removeClass('makespace');
      hidden.removeClass('expanded');
    }
    else {
      $('.expanded').removeClass('expanded');
      hidden.addClass('expanded');
      parent.addClass('makespace');
    }
  });
});
</script>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
seeraigAuthor Commented:
Thank you Justin for taking the time to work through this.
Julian HansenCommented:
You are welcome.
JulianH
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.