JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div class="aboverules">
<DIV class=rules data-link="8">
<DIV class=short>
<P>Мягкий знак ставится в неопределённой форме глагола (инфинитиве). Если глагол отвечает на вопрос «что делать?», мягкий знак ставится. Если глагол отвечает на вопрос «что делает?», мягкий знак не ставится.</P></DIV>
<DIV class=full>
<P>Мягкий знак ставится в неопределённой форме глагола (инфинитиве). Если глагол отвечает на вопрос «что делать?», мягкий знак ставится. Если глагол отвечает на вопрос «что делает?», мягкий знак не ставится.</P></DIV></DIV>
<DIV class=rules data-link="2">
<DIV class=short>
<P>Между частями бессоюзного сложного предложения при перечислении ставится запятая: Океан с гулом ходил за стеной черными горами, вьюга крепко свистала в отяжелевших снастях, пароход весь дрожал(Бун.); Примечание. По правилу сложносочиненного предложения, присоединяемая союзом и последняя часть сложного предложения отделяется запятой: На срубе лежал иней, ведро обжигало пальцы, ледяные звезды стояли над безмолвным и черным краем, и только в доме Пожалостина тускло светилось окошко (Пауст.).</P></DIV>
<DIV class=full>
<P>Между частями бессоюзного сложного предложения при перечислении ставится запятая: Океан с гулом ходил за стеной черными горами, вьюга крепко свистала в отяжелевших снастях, пароход весь дрожал(Бун.); Примечание. По правилу сложносочиненного предложения, присоединяемая союзом и последняя часть сложного предложения отделяется запятой: На срубе лежал иней, ведро обжигало пальцы, ледяные звезды стояли над безмолвным и черным краем, и только в доме Пожалостина тускло светилось окошко (Пауст.).</P></DIV></DIV> 
<DIV class=rules data-link="3">
<DIV class=short>
<P>Определительный оборот, стоящий после определяемого существительного, выделяется или отделяется запятыми.</P></DIV>
<DIV class=full>
<P>Обособляются (выделяются или отделяются) запятыми определительные обороты, т. е. определения, выраженные причастиями или прилагательными с зависимыми словами, в следующих...

CSS

.rules {
display:none;
}

JavaScript

(function($) {


 
 alert($(".aboverules").find("[data-link='8']").find(".short").html())

})(jQuery);

var rules = [
{
    code:"8",
    rule_short:"<p>Мягкий знак ставится в неопределённой форме глагола (инфинитиве). Если глагол отвечает на вопрос «что делать?», мягкий знак ставится.  Если глагол отвечает на вопрос «что делает?», мягкий знак не ставится.</p>",
    rule_full:"<p>Мягкий знак ставится в неопределённой форме глагола (инфинитиве). Если глагол отвечает на вопрос «что делать?», мягкий знак ставится.  Если глагол отвечает на вопрос «что делает?», мягкий знак не ставится.</p>"

},
{
    code:"2",
    rule_short:"<p>Между частями бессоюзного сложного предложения при перечислении ставится запятая: Океан с гулом ходил за стеной черными горами, вьюга крепко свистала в отяжелевших снастях, пароход весь дрожал(Бун.); Примечание. По правилу сложносочиненного предложения, присоединяемая союзом и последняя часть сложного предложения отделяется запятой: На срубе лежал иней, ведро обжигало пальцы, ледяные звезды стояли над безмолвным и черным краем, и только в доме Пожалостина тускло светилось окошко (Пауст.).</p>",
    rule_full:"<p>Между частями бессоюзного сложного предложения при перечислении ставится запятая: Океан с гулом ходил за стеной черными горами, вьюга крепко свистала в отяжелевших снастях, пароход весь дрожал(Бун.); Примечание. По правилу сложносочиненного предложения, присоединяемая союзом и последняя часть сложного предложения отделяется запятой: На срубе лежал иней, ведро обжигало пальцы, ледяные звезды стояли над безмолвным и черным краем, и только в доме Пожалостина тускло светилось окошко (Пауст.).</p>"
},
{
    code:"3",
    rule_short:"<p>Определительный оборот, стоящий после определяемого существительного, выделяется или отделяется запятыми.</p>",
    rule_full:"<p>Обособляются (выделяются или отделяются) запятыми определительные обороты, т. е. определения, выраженные причастиями или прилагательными с зависимыми словами, в следующих...