There are 3 text fields in columns (created by wordpress themes using shortcodes), I want to collapse / expand the text at the point of a break by clicking on ellipsis depending on the amount of text, but the problem is that neither classes nor div and span tags skip the shortcodes of the topic (columns) except for the simplest p , br , strong . How can I do that? It can be assumed that all columns in the minimized size will be the same height. fiddle

 .row > div { background: lightgrey; border: 1px solid grey; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <div class='row'> <div class="col-xs-4"><p>Текст текст...текст текст</p></div> <div class="col-xs-4"><p>Текст текст...текст текст</p></div> <div class="col-xs-4"><p>Текст текст...текст текст</p></div> </div>

  • What does span не пропускают столбики mean span не пропускают столбики ? - Jean-Claude
  • @ Jean-Claude in the sense of shortcode themes on which the posts are built - Vasya
  • came to this answer, but I need to respond individually jsfiddle.net/Gt25L/430 - Vasya

1 answer 1

Well, something like that, for example

 $(function(){ $('.col-xs-4 p').each(function(index, el) { $(this).addClass('native').hide(); var text = $(this).text(); text = text.substr(0,30) + ' <strong>...</strong> ' + text.slice(-30); $(this).after('<p class="after">' + text + '</p>'); }); $('.col-xs-4 strong').on('click', function() { $(this).closest('.col-xs-4').find('p.native').show().end().find('p.after').hide(); //высота var h = 0; $('.col-xs-4').each(function() { if ($(this).height() > h) { h = $(this).height(); } }); $('.col-xs-4').height(h); }); }); 
  .row > div { background: lightgrey; border: 1px solid grey; } strong:hover { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <div class='row'> <div class="col-xs-4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt porro, voluptas pariatur fugiat magni laborum, ea exercitationem at debitis in laboriosam totam modi ex iste earum. Nulla, dolores sed.</p></div> <div class="col-xs-4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur ratione quae dicta, excepturi quos, facilis odio illum in eveniet rem. Eum pariatur quam dolore facere temporibus unde molestias animi provident.</p></div> <div class="col-xs-4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil dignissimos animi ipsam voluptates facere vel tempore optio, ullam reiciendis nam excepturi a accusamus porro voluptatem minus. Officia perspiciatis nam commodi.</p></div> </div>

  • the only thing is that the list is opened once, and it is hidden / closed - Vasya