Displaying div content below its row in responsive design

Question

I have a 8 div at present and it may increase or decrease in count.Each of these div contain on clicking which it displays content relate to it.At a fixed with of 1024px and above it is working fine.But problem is all these div are responsive,at lower resolution the hidden div that is to be displayed are misaligned. Can any one help me in the same ?

This is the html core that i have wrote:-

        <div class="client-details fl_left" style="display: none;"
            id="citiCab2">
            <span class="pointer" style="left: 73px;"></span> <a
                class="close-button" href=""></a>
            <div class="client-container fl_left">
                <a href="http://citicabsinc.com/" target="_blank"><img
                    src="images/citicabs-big.png"></a>
            </div>
            <div class="client-container fl_right">
                <h1>Citi Cabs</h1>

                <p>The client is a progressive firm, providing eminent car rental
                    services to all kinds for travel requirements. It caters transport
                    and communication to its customers all over India.</p>

                <p class="title">Client Requirement </p>

                <p>The client wanted to come up with a website portal, that can be
                    navigated with ease by the visitor who is looking for the car
                    service within Bangalore and anywhere in India.</p>

                <p class="title">Challenge</p>

                <p>We the Maganiva Solutions Team had to predominantly understand
                    website workflow making it intuitive for the user to use it with
                    ease keeping in mind the visitor's page. </p>

                <p class="title">What Maganiva Solutions delivered </p>

                <p>Maganiva did a complete market study to get insights and came up
                    with a comprehensive model, wherein we not only designed the user
                    friendly website but also provided back-end support to the client
                    in Branding its online presence through SEO.</p>
            </div>
        </div>

Java script for the same.Also help to reduce the size of the code, as you can see i have simply repeated the same code again and again with only difference in the id to be called on mouse click to a particular div.

jQuery(function() {
    $('#citiCab1').click(function() {
        $(".client-details").addClass('display-none');
        $('#citiCab2').attr('style', function(i, style) {
            jQuery(this).removeClass('display-none');
            return style.replace(/display[^;]+;?/g, '');
        });
        $("#citiCab2").addClass('display');
    });



    $('#primus1').click(function() {
            $(".client-details").addClass('display-none');
            $('#primus2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });

            $("#primus2").addClass('display');
        });

        $('#MantriEden1').click(function() {
            $(".client-details").addClass('display-none');
            $('#MantriEden2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#MantriEden2").addClass('display');
        });

        $('#DilDaruDosti1').click(function() {
            $(".client-details").addClass('display-none');
            $('#DilDaruDosti2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#DilDaruDosti2").addClass('display');
        });

        $('#chai1').click(function() {
            $(".client-details").addClass('display-none');
            $('#chai2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#chai2").addClass('display');
        });

        $('#mbnt1').click(function() {
            $(".client-details").addClass('display-none');
            $('#mbnt2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#mbnt2").addClass('display');
        });

        $('#act1').click(function() {
            $(".client-details").addClass('display-none');
            $('#act2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#act2").addClass('display');
        });
        $('#mathru1').click(function() {
            $(".client-details").addClass('display-none');
            $('#mathru2').attr('style', function(i, style) {
                jQuery(this).removeClass('display-none');
                return style.replace(/display[^;]+;?/g, '');
            });
            $("#mathru2").addClass('display');
        });
    });

Answer 1

Hope this what you are looking for, try the below html. Hope it helps you!!!

HTML:

<p><a href="JavaScript:toggleMe('desc1');"><strong>Head1</strong></a></p>
    <div class="desc" id="desc1" style="display: none;">
        <h2>Description 1</h2>
        <p>Content</p>
        <p><a class="close" href="JavaScript:toggleMe('desc1');">Close</a></p>
    </div>
<p><a href="JavaScript:toggleMe('desc2');"><strong>Head2</strong></a></p>
    <div class="desc" id="desc2" style="display: none;">
        <h2>Description 2</h2>
        <p>Content</p>
        <p><a class="close" href="JavaScript:toggleMe('desc2');">Close</a></p>
    </div>

CSS:

.close{
    text-align:right;
    display:block;
    padding:10px;
}
.desc{
    background:#dedede;
    padding:10px;
}

Script:

<script>
function toggleMe(a) {
    var e = document.getElementById(a);
    if (!e) return true;
    if (e.style.display == "none") {
        e.style.display = "block"
    } else {
        e.style.display = "none"
    }
    }
</script>

Fiddle Demo