Question posted in
The full documentation can be found here.

Divi theme – Changing text content when clicking on different icons

I’m building a website for my business and I’m trying to create a section with three different icons representing different subdivisions.

I have text content below the icons and I would like it to change based on which icon is clicked. Similar section can be seen in this website (scroll down to the “services” part).

I’m a complete beginner and I’m using WordPress with a multipurpose theme called Divi. I guess I could achieve similar results by using jQuery (?). Though, I wouldn’t mind using a plugin if it makes the job easier.

Any help would be greatly appreciated!

Tags:

3

Answers


  1. 0

    edit => As your a beginner you should use a plugin like Bruno Kos suggested, although I will leave my answer up just in case someone else finds it useful

    I’m not sure on plugins but in the plain text editor you could try this (its relatively easy to get your head around):

    //the Cartman image. Notice the onclick and how it launches the Cartman function below 
<img src="http://www.iconarchive.com/download/i33463/xtudiando/south-park/Cartman.ico" onclick="cartman()">

//the kenny image. This one launches the Kenny function
<img src="http://icons.iconarchive.com/icons/xtudiando/south-park/128/Kenny-icon.png" onclick="kenny()">

//This is the p (paragraph) tag where we will inject our text 
<p id="text1"></p>


<script>

//This is some simple javascript. The first function is to inject the Kenny text between the <p></p> tags with the "id" "text1".
function kenny(){
document.getElementById("text1").innerHTML = "Oh my god, you killed Kenny!";
}

//this function injects the Cartman text
function cartman(){
document.getElementById("text1").innerHTML = "Screw you guys I'm going home";
}

</script>

    example here http://js.do/code/131702 Go and have a fiddle! Use copy/paste and see if you can add another image and text

    Login or Signup to reply.
  2. 0

    Take a look on it: jQuery UI Library and one of the widget inside.

    https://jqueryui.com/tabs/

    I think you’ll be happy not just by having content inside JS code but toggling visibility of your post/page blocks. It will allows you to have editable easy content.

    jQuery UI is popular but you can make it with no extra plugin at all.

    As example:

    $(document).ready(function(){
  $('.tabToggler').on('click', function(e){
    e.preventDefault();

    var $tabToggler = $(e.target);
    var $tabId = $tabToggler.data('id');

    $('.tab').hide();
    $('.tab[data-id="' + $tabId + '"]').show();
  })
});
    .tabToggler {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 10px;
  color: #fff;
  font-family: sans-serif;
  text-decoration: none;
}

.tabToggler[data-id="1"]{
  background:red
}

.tabToggler[data-id="2"]{
  background:green
}

.tabToggler[data-id="3"]{
  background:blue
}

.tab {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="tabToggler" data-id="1">First ICO</a>
<a href="#" class="tabToggler" data-id="2">Second ICO</a>
<a href="#" class="tabToggler" data-id="3">Third ICO</a>

<div class="tab" data-id="1">Content 1</div>
<div class="tab" data-id="2">Content 2</div>
<div class="tab" data-id="3">Content 3</div>

    If you need some extra explanation I can update my answer with it.

    Login or Signup to reply.
  3. 0

    Since you’re using WordPress, there’s absolutely no need for you to deal with jQuery to have tabs.

    An example of plugin you can use for those Tabs is Tabby Responsive Tabs

    In any case, Tabs keyword is what you’re looking for, and since you’re saying that you are complete beginner, any free or premium Tabs plugin should do the job for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search