سوال - باز و بسته کردن باکس نوشته با کلیک روی + و -

hosseinfarrokh

New Member
سلام دوستان عزیز
من یه سوال دارم. میخوام نوشته هام در حالت عادی فقط تیترشون معلوم باشه و وقتی روی آیکون + در کنار تیتر کلیک میکنم نوشته باز شه و وقتی روی - کلیک کنم دوباره جمع شه.
مثل این سایت: http://kier.co.uk/about/our-board.aspx
خواهش میکنم راهنماییم کنید.
ممنون
 

SA Developer

New Member
سلام
با جی کوئری براحتی اینکارو میشه انجام داد
کد کامل:
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Title if document</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
    <style type="text/css">
    body,html{background:#F3F3F3;}
    
    #items {
    float: left;
    width: 600px;
    padding: 10px;
    }

    #items .title {
    background: #CAE5EE;
    padding: 10px;
    }
    
    #items .item {
    background: #FCFCFC;
    margin: 5px;
    border: 2px solid #84B3C5;
    }
    
    #items .sh {
    float: right;
    font-size: 18px;
    cursor: pointer;
    }
    </style>
</head>
<body>

<div id="items">
    <div class="item">
        <div class="title">Title of Item<span class="sh">+</span></div>
        <div class="content">Re-joined Kier in January 2007 as a director within the Construction division. He was appointed to the Board in July 2010 and was appointed as the chief operating officer in July 2013. He has operational responsibility for the Group’s construction and services operations. He has over 35 years’ experience in building, civil engineering and utilities with experience in both the UK and overseas and he is a member of the CBI Northern Committee. </div>
    </div>
    
    <div class="item">
        <div class="title">Title of Item<span class="sh">+</span></div>
        <div class="content">He joined Kier in August 2010 as Group finance director designate and took over the role of Group finance director in November 2010. He also assumed operational responsibility for the Property division in June 2013. He made the move across to Kier, while deputy finance director at Balfour Beatty. He is a member of the Institute of Chartered Accountants, having trained and qualified in the contracting, housing and energy sectors of KPMG London, working with clients like John Laing and National Power. Combining his roles at KPMG, Bovis Lend Lease, Balfour Beatty and Kier, he has over 20 years of experience working in the built environment and construction sector.</div>
    </div>
    
    <div class="item">
        <div class="title">Title of Item<span class="sh">+</span></div>
        <div class="content">Appointed to the Board in October 2010. He is a chartered accountant and a partner in Rothschild, the global financial advisory business, where he has spent most of his career. He is currently chairman of Rothschild’s regional business. He has been involved in a range of private and public company work with a focus on mergers, acquisitions, private equity and capital raising. He is the chairman of the Risk Management and Audit Committee and a member of the Nomination and Remuneration Committees. </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $('.item .content').hide();
    
    $('.sh').click(function(){
        if ($(this).parents('.item').children('.content').is(':visible')){
            $(this).parents('.item').children('.content').slideUp(300);
            $(this).html("+");
        }
        else{
            $(this).parents('.item').children('.content').slideDown(300);
            $(this).html("-");
        }
    });

});
</script>
</body>
</html>
 

جدیدترین ارسال ها

بالا