how to fix the difference in line thickness for a collapsable element


Tags: html,css,twitter-bootstrap

Problem :

I have a webpage that uses bootstrap accordion.

There is a line that divides sections. I have included a screenshot.

When the user clicks the 'Read More' the accordion opens.

The problem is that there are lines on the side for each section. When a section opens, the line follows the section, as it should. However, the thickness of the lines looks off. I can't figure out how to make this work so it looks the same opened or closed.

enter image description here enter image description here

Code Shared on jsfiddle.net here

jQuery(".readmore").click(function () {
    var thisid = jQuery(this).attr('id');
    var id = thisid.split("-");
    jQuery(".read-" + id[1] + "-text").slideDown();
    jQuery(this).css("display", "none");
});
jQuery(".readclose").click(function () {
    var thisid = jQuery(this).attr('id');
    var id = thisid.split("-");
    jQuery(".read-" + id[1] + "-text").slideUp();
    jQuery("#read-" + id[1]).css("display", "block");
});

<div class="second-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="expect-head little-time">Big changes in little time</div>
                <div class="expect-body hasborder-right">TeamUp was developed from over 30 years of coaching the world's top executives. We truly understand what it takes to achieve deep, meaningful life changes, even on a busy schedule.
                        <h3 class="readmore" id="read-1">> Read More</h3>

                    <div class="read-1-text" style="display:none;">Whether you choose to create a healthier lifestyle, deeper relationships, or seek more fulfillment in your career, TeamUp will take you there. You’ll discover your patterns of behavior and consciously choose which ones to keep and which ones to change. You'll experience your life from a new and refreshing perspective.
                            <h3 class="readclose" id="close-1">> Close</h3>

                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="expect-head results">Results that last a lifetime</div>
                <div class="expect-body hasborder-left">This course is a all about taking action. The specific action to take is determined by you. There are no formulas or a one-size-fits-all. You define your own actions based upon what you want to do differently in your life.
                        <h3 class="readmore" id="read-2">> Read More</h3>

                    <div class="read-2-text" style="display:none;">You are creative and insightful. You probably already know what you want to change. Through your weekly interactions with your teammates, and the course material, you will turn your insights into action to achieve your personal growth goals.
                            <h3 class="readclose" id="close-2">> Close</h3>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="expect-head getsupport">Get Support from your team</div>
                <div class="expect-body hasborder-right">Each week you'll have a 90-minute online conversation with your team members. They will listen, challenge and motivate you. You'll find the strength and courage to overcome any obstacles along the way.
                        <h3 class="readmore" id="read-3">> Read More</h3>

                    <div class="read-3-text" style="display:none;">You will also inspire change in the members of your team. You'll experience first hand how fulfilling it is contributing to others insights and personal growth. Working together is not only more effective...it's more fun.
                            <h3 class="readclose" id="close-3">> Close</h3>

                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="expect-head ontrack">We'll keep you on track</div>
                <div class="expect-body hasborder-left">A dedicated coach facilitator will guide you, and your team throughout the course. All TeamUp facilitators have been throughly trained and mentored, maintaining the highest standards of confidentiality and integrity.
                        <h3 class="readmore" id="read-4">> Read More</h3>

                    <div class="read-4-text" style="display:none;">Our facilitators know what it takes to make long-lasting change, and will create a safe, inspirational learning environment where you can achieve profound personal growth.
                            <h3 class="readclose" id="close-4">> Close</h3>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.second-section {
    border-bottom: 1px solid #666666;
}
.second-section h2 {
    font-size: 56px;
    text-align: center;
}
.second-section .container-fluid {
    padding: 0;
}
.second-section .col-md-6 {
    padding: 0;
    width: 50%;
    float:left;
}
.expect-head {
    color: #000;
    padding: 35px 50px;
    text-align: left;
}
.expect-head h3 {
    line-height: inherit;
}
.expect-body {
    padding: 20px 50px;
    min-height: 210px;
}
.expect-body b {
    font-weight: 600;
}
.readmore, .readclose {
    color: #FF7C00;
    cursor: pointer;
    display: block;
    font-size: 18px;
    font-weight: normal;
    line-height: inherit;
    margin-top: 30px;
}
.read-1-text, .read-2-text, .read-3-text, .read-4-text {
    margin: 40px 0 0;
}
.hasborder-left {
    border-left: 1px solid #666666;
}
.hasborder-right {
    border-right: 1px solid #666666;
}

Any help appreciated.



Solution :

It isn't that weird that this is happening, because you are putting two borders on the same place.

You say to your left div to output a border on the right and to output a border on the left of the most right div. This gives you two borders...

Therefore, you should remove one of them to get a singular border. If you want to have a thicker border, just change the pixel of the border you want to have.

See this for a demo: http://jsfiddle.net/8hp2X/2/

.hasborder-right {
    border-right: 2px solid #666666;
}

As you can see, I have removed one of the borders, which results in a nice looking page.


    CSS Howto..

    css: how to make
    not highlighted when selecting text (in Chrome)

    How to define link text color in UIWebView

    How to borrow styles from another CSS rule

    How could I add a header to a HTML page via CSS?

    How to modify the layout of jQuery UI autocomplete combobox

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How can I slide a image up and down over a background image to create a scanning effect?

    YUI Calendar: how does it load the Sam's Skin CSS?

    How can I align text to the top and the bottom of the same div css?

    How to have a different visited link colour in 2 sections of a html?

    How to force dropdown boostrap buttons in a nav bar to fill the entire container width?

    How to dynamically change CSS elements to be HTTPS or HTTP

    Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

    How to use nested p tags in CSS and Bootstrap boxes?

    How to centre a javascript element using inline css? [closed]

    Including loads of css files and Javascript file - how do I optimize

    How to make this css crossbrowser?

    how to force 100% height on a dynamic drive css fluid/fixed layout

    How to make responsive popup div?

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    how to make yo angular load bootstrap theme css

    How to Change XYChart's color in JavaFx?

    How to order properties in a declaration block? [closed]

    How to remove CSS triangles?

    How change css of disabled input checkbox tag?..because it's too light and hard to see

    How to style form elements unobtrusively with JavaScript and CSS?

    How to have full page that is not a background img or fixed positioned?

    Show missing CSS in Google Chrome

    How to make a ruler scale in HTML and CSS

    How to get a CSS selector in PHP?