使用jQuery展开/折叠文本

当我想要展开文本时，我总是使用以下jQuery代码：

jQuery(".readMore").bind("click", function () {
    jQuery(this).text(jQuery(this).text() == "Leer más" ? "Ocultar" : "Leer más");
    jQuery(this).prev().slideToggle();
    });
});

和HTML代码，如下所示：

<div class="alwaysDisplay"><b>Text to display always</b></div>
<div class="expandText">Text to expand</div>
<div class="readMore">Leer más</div>

但我想展示如下内容：

Text to display always

Leer más

Text to display always Leer más

我的意思是，在同一行中展开的“按钮”。我想问题在于，当我使用div标签时，它会在下一行显示文本。如何在同一行中显示“按钮”Leer más

---

非常感谢。

这是因为

div

是一个

块

元素。将

display

属性设置为

inline block

，或者使用另一个元素，如

span

，它是

inline

元素

.alwaysDisplay, .expandText {
   display: inline-block; 
}

您的标记不是语义性的，您不应该对所有内容都使用

div

s，对于使用

p

元素的文本内容。对于按钮，应使用

按钮

或

元素：

建议：

HTML:

谢谢BlackSheep，您能告诉我如何在我的示例中使用属性内联块吗？再次非常感谢您。非常感谢您对我的帮助和建议，@BlackSheep。我将尝试使用它们。
<p class="text_content">
    <b>Text to display always</b>
    <span class="hidden_text">Text to expand</span>
</p>
<a href='#' class='read_more'>read more</a>

$('.read_more').on('click', function(e) { 
    e.preventDefault();
    $(this).text(function(_, currentText){
        return currentText === 'read more' ? 'read less' : 'read more';
    }).prev().find('.hidden_text').stop().slideToggle();
});