css - 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, have read more button, on click of that, text expands & icons of 1st & 3rd column comes down not want... give me demo template in if click button, icon below text div should come down , should not affect position of other columns icons. i'm using 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 not available 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 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 not available 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>
<!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"> 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"> second divsion <div class="row"> <div class="col-lg-12 col-sm-12 col-md-12"> middle section text part goess here </div> </div> </div> <div class="col-lg-4 col-md-4 cl-sm-12 border"> 1 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 work.
Comments
Post a Comment