0

I am using Semantic UI JS for implementing various UI functionalities. Here is the link for the Semantic UI. I need to set the value of the Title dynamically. Here in the below example "Title 1". Looking for a way to do it using 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>  

1 Answer 1

0

I would wrap the title text in a span element so that i could target it and change the text with the jQuery .text() method.

$(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>

1
  • Great help! The trick adding SPAN element to identify the text :) Thank you Gaby :) Dec 15, 2016 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.