Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Change background color of selected div onclick not working?

I’m trying to make a form’s selected element change its background color upon click. When the page initially loads the first option is selected. I’m trying to figure out what is wrong with the code I have, because it loads CORRECT when its viewed in our page editor (we’re using wordpress & elementor to build our pages and running this as custom html code), but doesn’t not load correctly on a “live” page.

I’ve researched for other methods of doing this without much success, and am especially confused considering the page works – but only when viewed as an admin inside a page editor (elementor).

https://jsfiddle.net/ncLk85mb/

function toggleClass(el) {
    var kids = document.getElementById('menu1').children;
    for (var i = 0; i < kids.length; i++) {
        kids[i].className = "item";
    }
    el.className = "item highlight";
}

Above is the code I’m attempting to use to do the highlighting. I’ve pasted the entirety of what we’ve got so far into jsfiddle at the link above.

Tags:

3

Answers


  1. 0

    Use setAttribute:

    function toggleClass(el) {
    var kids = document.getElementById('menu1').children;
    for (var i = 0; i < kids.length; i++) {
        kids[i].setAttribute("class", "item");
    }
    el.setAttribute("class", "item highlight");
}
    Login or Signup to reply.
  2. 0

    You don’t need to add another function to add or remove highlight class. You already trigger click event on your div element so you have to just modify it like below –

    $(".item").on('click', function() {
  $('.item').removeClass('highlight');
  $(this).addClass('highlight');
  var item = $(this).find('input');
  item.trigger("click");
  if (item.prop("checked")) {
    item.prop('checked', true);
  } else {
    item.prop('checked', false);
  }

});

$("input:checkbox").on('click', function() {
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
});

$("input[name=submit]").on('click', function() {
  var redirect = $('input[name="product"]:checked').val();
  window.location.href = redirect;
});
    /*Funnel Template - Step 2 - Order Form */

.main-panel {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  min-height: 320px;
  width: 100%;
}

.main-panel h2 {
  font-size: 26px;
  text-align: left;
  margin: 0;
  font-weight: bold;
}

.main-panel .item {
  margin: 15.4px 0;
  padding: 8px 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.main-panel .item p {
  margin: 0;
}

.main-panel .selection {
  float: left;
  width: 10%;
}

.main-panel .left-section {
  float: left;
  width: 46%;
}

.main-panel .right-section {
  float: right;
  width: 37%;
  margin-left: 5%;
  text-align: right;
}

.main-panel .item.highlight {
  background-color: #ffc500;
  z-index: 0;
  border-radius: 5px;
}

.main-panel .item input[type='checkbox'] {
  opacity: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
}

.main-panel .item span::after {
  opacity: 1;
  z-index: 1;
  content: "";
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 10px;
  border: 2px solid #172969;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  line-height: 1.1em;
}

input[type="checkbox"]:checked+span:after {
  font-family: 'FontAwesome';
  content: "f00c";
  background-color: #172969;
  color: #fff;
}

input[type=button] {
  font-size: 18px;
  font-weight: 600;
  font-family: Noto Sans, sans-serif;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-panel">
  <form>
    <h2 style="text-align:center;">CHOOSE YOUR PACKAGE!</h2>
    <div id="menu1">
      <div class="item highlight">
        <div class="selection"><input type="checkbox" class="styled" name="product" value="#link1" checked="checked" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="link#2" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="#link3" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
      <div class="item">
        <div class="selection"> <input type="checkbox" name="product" value="#link4" /><span></span> </div>
        <div class="left-section">
          Option 1 A
        </div>
        <div class="right-section">
          Option 1 B
        </div>
      </div>
    </div>
    <input type="button" name="submit" value="Click Now!" />
  </form>
</div>

    JSFiddle Link

    Login or Signup to reply.
  3. 0

    Use element.classList.add() instead.

    function toggleClass(el) {
    var kids = document.getElementById('menu1').children;
    for (var i = 0; i < kids.length; i++) {
        kids[i].classList.add("item");
    }
    el.classList.add("item");
    el.classList.add("highlight");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search