It needs to be implemented: when we click on .dev-site-opener - .dev-site-text gets the same height as its child .dev-site-text> p. And in the end we get an animation where the text appears smoothly. But you need to make sure that when one block is open and we click on the other, the one that is open is closed, and the one that we clicked opens.

$('.dev-site-opener').click(function() { var _this = $(this); var text = $(this).parent().find('.dev-site-text'); if (!_this.hasClass('active-1')) { text.height(1); _this.addClass('active-1'); } else { text.height(text.find('p').height()); _this.removeClass('active-1'); } }); 
 .slider-dev-site-wrap { margin-top: 40px; border-top: 1px solid #000; } .slide-dev-site-cont { margin: 80px auto; width: 1120px; } .slide-dev-site-cont .left-dev-site { float: left; width: 538px; text-align: center; } .slide-dev-site-cont .right-dev-site { float: left; width: 538px; text-align: center; } .right-dev-site-title { display: block; vertical-align: top; font: 500 27px/29px 'Proxima Nova', Arial, Helvetica, sans-serif; position: relative; border-bottom: 1px solid #1f1f1f; padding: 0 0 15px; margin: 0 0 30px; text-align: left; } .right-dev-site-title:after { content: ''; position: absolute; bottom: -2px; left: 0; background: #f9da00; width: 100px; height: 3px; } .dev-site-list { text-align: left; } .dev-site-list li { list-style: none; margin-bottom: 20px; } .dev-site-list .dev-site-opener { text-transform: uppercase; position: relative; font-weight: 300; border-bottom: 1px dotted; cursor: pointer; display: inline; font-size: 14px; color: #282828; } .dev-site-list .dev-site-opener:before { width: 15px; height: 15px; content: ''; position: absolute; display: inline-block; vertical-align: middle; background: #000; left: -30px; top: 2px; } .dev-site-list .active-1:before { transform: rotate(45deg); } .dev-site-list .dev-site-text { padding-left: 40px; overflow: hidden; line-height: 22px; color: #757575; font-size: 14px; transition: 0.2s ease-in-out; height: 1px; } 
 <div class="right-dev-site-body"> <ul class="dev-site-list"> <li> <div class="dev-site-opener">ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ эксклюзивного Π΄ΠΈΠ·Π°ΠΉΠ½Π°</div> <div class="dev-site-text"> <p> ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ интСрфСйса Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта. ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΠ΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ графичСских элСмСнтов, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… тСматичСских ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° сайтС. </p> </div> </li> <li> <div class="dev-site-opener">ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅2. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ эксклюзивного Π΄ΠΈΠ·Π°ΠΉΠ½Π°</div> <div class="dev-site-text"> <p> ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ интСрфСйса Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта2. ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΠ΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ графичСских элСмСнтов, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… тСматичСских ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° сайтС. </p> </div> </li> </ul> </div>

    2 answers 2

    good afternoon, tk jquery is connected here are the solutions for animation with jquery methods

     $('.dev-site-opener').click(function() { var _this = $(this); _this.next('.dev-site-text').slideToggle(); _this.parent('li').siblings().find('.dev-site-text').slideUp(); }); 
     *{ box-sizing: border-box; } .slider-dev-site-wrap { margin-top: 40px; border-top: 1px solid #000; } .slide-dev-site-cont { margin: 80px auto; width: 1120px; } .slide-dev-site-cont .left-dev-site { float: left; width: 538px; text-align: center; } .slide-dev-site-cont .right-dev-site { float: left; width: 538px; text-align: center; } .right-dev-site-title { display: block; vertical-align: top; font: 500 27px/29px 'Proxima Nova', Arial, Helvetica, sans-serif; position: relative; border-bottom: 1px solid #1f1f1f; padding: 0 0 15px; margin: 0 0 30px; text-align: left; } .right-dev-site-title:after { content: ''; position: absolute; bottom: -2px; left: 0; background: #f9da00; width: 100px; height: 3px; } .dev-site-list { text-align: left; } .dev-site-list li { list-style: none; margin-bottom: 20px; } .dev-site-list .dev-site-opener { text-transform: uppercase; position: relative; font-weight: 300; border-bottom: 1px dotted; cursor: pointer; display: inline; font-size: 14px; color: #282828; } .dev-site-list .dev-site-opener:before { width: 15px; height: 15px; content: ''; position: absolute; display: inline-block; vertical-align: middle; background: #000; left: -30px; top: 2px; } .dev-site-list .active-1:before { transform: rotate(45deg); } .dev-site-list .dev-site-text { padding-left: 40px; line-height: 22px; color: #757575; font-size: 14px; display:none; width:100%; } p { margin:0; padding:10px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="right-dev-site-body"> <ul class="dev-site-list"> <li> <div class="dev-site-opener">ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ эксклюзивного Π΄ΠΈΠ·Π°ΠΉΠ½Π°</div> <div class="dev-site-text"> <p> ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ интСрфСйса Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта. ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΠ΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ графичСских элСмСнтов, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… тСматичСских ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° сайтС. </p> </div> </li> <li> <div class="dev-site-opener">ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅2. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ эксклюзивного Π΄ΠΈΠ·Π°ΠΉΠ½Π°</div> <div class="dev-site-text"> <p> ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ интСрфСйса Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ сайта2. ΠŸΡ€ΠΎΠ΄ΡƒΠΌΡ‹Π²Π°Π½ΠΈΠ΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ графичСских элСмСнтов, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… тСматичСских ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° сайтС. </p> </div> </li> </ul> </div>

    Please note that to work correctly, you need to specify the width of the hidden element should not have external indents (use padding instead of margins) PS If you want you can implement animations on css - then manipulate the height of "max-height". If a bootstrap is connected in the project, then there is already an accordion in it.

    • that's how it was necessary to think out all the same logic, maybe someone will come in handy - Nikita Cherny
    • Usually, all tasks are solved after disassembling one complex task into several simple ones. You can make a list and solve each problem separately and consecutively - slowBro

    all the same thought out logic, maybe someone will come in handy

     $('.dev-site-opener').click(function(){ var _this = $(this), text = $(this).parent().find('.dev-site-text'); if(_this.hasClass('active-1')){ _this.removeClass('active-1'); text.height(1); } else{ $('.dev-site-opener').removeClass('active-1'); $('.dev-site-text').height(1); text.height(text.find('p').height() +20); _this.addClass('active-1'); } });