How to insert a div below dynamic divs row after onclick

Question

I have rows of div's floating near one anther and the box have a max-width so there will be only 4 div's max in each row

When I re-size the window the rows shrink so in the end there is one div in each row (that the way I want it)

My question is how do I add another below each row regardless the size of the window or how many div's there are in row when I do on click?

I managed to to do so when the row's are fixed size but not when they are dynamic

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo plugins_url( "design.css", __FILE__ ) ;?>""" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    var oldRow = 0;
    var oldID = 0;
    var rowCount = 2;
    function openRow(row,id) {



        var elm = document.getElementById("rowInfo" + row);
        var txt = document.getElementById("text" + row);
        var logo = document.getElementById("logo" + id);

        if (oldID == id && elm.style.display == "block")
        {
            elm.style.display = "none";
            logo.style.backgroundColor = "green";
        }
        else {
            elm.style.display = "block";
            txt.innerHTML = "ID = " + id;
            oldID = id;

            if (oldRow!=0 && oldRow != row) {
                document.getElementById("rowInfo" + oldRow).style.display = "none";
            }

            if (oldID != 0) {
                document.getElementById("logo" + oldID).style.backgroundColor = 'green';
            }

            oldRow = row;
        }

    }
</script>
</head>
<body>
<div id="Main">
    <div class="row">
        <div class="rowBox">
            <div class="rowBoxLogo" id="logo1">
                <img src="<?php echo plugins_url( "logos/logo.png",__FILE__ ) ;?>"onclick="openRow(1,1)" />
            </div>

        </div>
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo2">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,2)" />
            </div>
        </div>  
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo3">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,3)" />
            </div>
        </div> 
        <div class="rowBox" >
            <div class="rowBoxLogo" id="logo4">
                <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(1,4)" />
            </div>
        </div>
    </div>
    <div class="rowInfo" id="rowInfo1">
        <p class="par" id="text1"></p>
    </div>
   <div class="row">
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo5">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,5)" />
           </div>

       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo6">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,6)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo7">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,7)" />
           </div>
       </div>
       <div class="rowBox">
           <div class="rowBoxLogo" id="logo8">
               <img src="<?php echo plugins_url( "logos/logo.png", __FILE__ ) ;?>" onclick="openRow(2,8)" />
           </div>
       </div>
   </div>
   <div class="rowInfo" id="rowInfo2">
       <p class ="par" id="text2"></p>
   </div>
</div>

</body>
</html>

and my css

html {}
#Main {
    max-width:820px;
    margin:0 auto;
}
.row {
    width:100%;
    height:80px;
}
.rowBox {
    width:200px;
    height:100%;
    padding-left:5px;
    padding-bottom:5px;
    float: right;
}
.rowBoxLogo {
    width:100%;
    height:100%;
    float: right;
    background-color:green;
    vertical-align:middle;
    text-align:center
}
.rowInfo {
    width:100%;
    height:90px;
    background-color:green;
    display:none;
    padding:0 0 0 0;
}
.par {
    margin-top:0;
    padding:0;
}

Are you trying to set up something like google image preview? — dfsq, May 17 '15 at 09:59
Add working code snippet please, here or on http://jsfiddle.net. — sergdenisov, May 17 '15 at 10:04

score 1 · Accepted Answer · edited May 23 '17 at 12:30

For this problem I would change styles a little bit. Namely, change block layout from float: right to display: inline-block. Then it would be easy to achieve desired effect with this simple javascript:

var $info = $('<div class="rowInfo"><p class="par"></p></div>');
$('.rowBoxLogo').click(function() {
    var $block = $(this).parent('.rowBox');
    if ($block.next().hasClass('.rowInfo')) {
        $info.toggle();
    }
    else {
        $info.insertAfter($block).css('display', 'block');
        $info.find('.par').text("ID = " + this.id);
    }
});

In this case you don't need to put onclick attributes on every block anymore.

Demo: http://plnkr.co/edit/mbV9toL5CsZ2BwlVEFYH?p=preview

Also you might be interested to check this related answer I provided on somewhat similar question How to target div at the end of the row?.

How to insert a div below dynamic divs row after onclick

1 Answers1