Установить название Аккордеона в Semantic.JS

Question

Я использую Semantic UI JS для реализации различных пользовательских интерфейсов. Вот ссылка на Semantic UI. Мне нужно установить значение Title динамически. Здесь в приведенном ниже примере «Название 1». Ищете способ сделать это с помощью JQuery.

<div class="ui styled accordion"> 
 
    <div class="title"> 
 
    <i class="dropdown icon"></i> 
 
    Title 1 
 
    </div> 
 
    <div class="content"> 
 
    <p class="transition hidden">Content of the title</p> 
 
    </div> 
 
</div>

Answer 1

Я хотел бы обернуть текст заголовка в span элемента так, чтобы я мог предназначаться и изменить текст с помощью метода JQuery .text().

$(function() { 
 
    // initialize accordion 
 
    $('.ui.accordion') 
 
    .accordion({ 
 
     selector: { 
 
     trigger: '.title' 
 
     } 
 
    }) 
 

 
    // change title on button click 
 
    $('button').on('click', function() { 
 
    $('.title span').text('The new title to use') 
 
    }); 
 
});

@import url('https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script> 
 

 
<div class="ui styled accordion"> 
 
    <div class="title"> 
 
    <i class="dropdown icon"></i> 
 
    <span>Title 1</span> 
 
    </div> 
 
    <div class="content"> 
 
    <p class="transition hidden">Content of the title</p> 
 
    </div> 
 
</div> 
 

 
<button>Change the title</button>