srv srv - 1 month ago 7
CSS Question

I have a Single row within that I want to make 3 columns which are not related to each others height & width

In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...

<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>

<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>

<p class="brief_Desc_a">

</p>
<p class="det_DescF" ng-show="readMore">

</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>

</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<a href="javascript:void(0)" class="modal-opportunity modal-cont displayTooltip" data-placement="bottom" title="Future Trends"><img class="img-responsive" src="images/Future_trends_v02.png" alt=""></a>
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<a href="javascript:void(0)" class="displayTooltip" title="Related careers" data-placement="bottom" ng-click="changeLocationByName('Related-careers');"><img class="img-responsive" src="images/Related_careers_v02.png" alt=""></a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<a href="" class="displayTooltip" title="Day In the Life" ng-click="changeLocationByName('day-in-life');"><img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt=""></a>
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">

</div>

<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>

</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>

<div class="groups col-sm-4">
<div class="courses_Colleges">
<a href="javascript:void(0)" class=" displayTooltip" title="Courses & Colleges" ng-click="changeLocationByName('coursescolleges');"><img class="img-responsive " src="images/Courses_Colleges_v02.png" alt=""></a>
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>


</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">

<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->

<div ></div>

</div>
</div>

Answer
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <style>
    .border{
        border: 2px solid black;
    }
        .heightWidth{
            height: 200px;
            width: 200px;
        }
    </style> 
    <body>



    <div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           first image goes here
            </div>            
        </div> 
        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           2nd image goes here
            </div>            
        </div> 
        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           3rd image goes here
            </div>            
        </div> 
        </div>



        <div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-md-12">
            your middle section the text part goess here 
            </div>
            </div>        
        </div>



        <div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division


        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           first image goes here
            </div>            
        </div> 
        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           2nd image goes here
            </div>            
        </div> 
        <div class="row">
        <div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
           3rd image goes here
            </div>            
        </div> 
        </div>  



    </body>
</html>

This will work.

Comments