CODEWITHSUNDEEP
javascripthtmlsvgtoggle
Auzurial Prints
Auzurial Prints

Reputation: 29

Toggle SVG With Radio Buttons

Hello there Stack Overflow community, I am a graphic designer trying to get my head around code. I am dealing with SVG Graphics that I need to toggle between. In the page I would like to have them ontop of each other and depending which button is pressed is the one the user sees. Here is the code and I will provide a workflow to give some extra perspective. I apologize in advance if the code is hideous.

Visual Graph

function showGroup(group)
{
    $("#hideables").children('div.'+group).show();
    $("#hideables").children('div').not('.'+group).hide();
}
<div class="catProdAttributeItem"><input type="radio" id="34656268" name="5905984" mandatory="1" onclick="showGroup('Solid')"/><span>Solid </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34656273" name="5905984" mandatory="1" onclick="showGroup('Split')"/><span>Split $10</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Marble')"/><span>Marble $15</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup('Split Marble')"/><span>Split Marble $15</span></div>
                           </div>
                           
<div id="hideables">                          
<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Avian-Solid</title>
  
  <div class="Solid">
  <rect width="610" height="610" style="fill: blue";  class="basecolor"/>
  
  </div>
</svg>

<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Split</title>
  <div class="SplitSVG">
  <rect width="610" height="610" style="fill: green";  class="basecolor"/>
  </div>
</svg>

<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Marble</title>
  <div class="MarbleSVG">
  <rect width="610" height="610" style="fill: red";  class="basecolor"/>
  </div>
</svg>
</div>

Upvotes: 0

Views: 1506

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

First off. One big mistake you made was having <div> elements inside your SVGs. <div> is not a valid SVG element.

Anyway, here's how I would do it.

On click, we pass to showGroup() an array of the SVG ids we want to show. In showGroup() we first hide all SVGs, then turn back on all the ones with the ids that have been passed in.

function showGroup(groups)
{
    // Hide all SVGs
    $("#hideables svg").hide();

    // Now show just the ones we want
    $.each(groups, function(i, item) {
      $('#'+item).show();
    });
}


// Initialise the page by hiding all SVGs.
// (The empty array parameter results in none being shown)
showGroup([]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="catProdAttributeItem"><input type="radio" id="34656268" name="5905984" mandatory="1" onclick="showGroup(['Solid'])"/><span>Solid </span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34656273" name="5905984" mandatory="1" onclick="showGroup(['Split'])"/><span>Split $10</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Marble'])"/><span>Marble $15</span></div>
                              <div class="catProdAttributeItem"><input type="radio" id="34657110" name="5905984" mandatory="1" onclick="showGroup(['Split','Marble'])"/><span>Split Marble $15</span></div>
                           </div>
                           
<div id="hideables">                          
<svg id="Solid" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Avian-Solid</title>
  <rect width="610" height="610" style="fill: blue";  class="basecolor"/>
</svg>

<svg id="Split" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Split</title>
  <rect width="610" height="610" style="fill: green";  class="basecolor"/>
</svg>

<svg id="Marble" xmlns="http://www.w3.org/2000/svg" width="609.1" height="609.1" viewBox="0 0 609.1 609.1">
  <title>Marble</title>
  <rect width="610" height="610" style="fill: red";  class="basecolor"/>
</svg>
</div>

Upvotes: 2

Related Questions