Toggle Divs working on web but not in CRM 2013

Question

I'm working with Microsoft Dynamics CRM 2013 and am trying to create a data toggle block, which would toggle values according to which category is selected. The list has 7 div's and should only show the div selected (ie div 3), not showing all of the others. The html is working like a charm in a browser but not in CRM, meaning none of the categories are toggling when js, css, and html are added to CRM 2013 with a webresource. I am not a developer but need to figure out how to do it. Any help is greatly appreciated!! This is the entire html webresource entered into CRM This was created in jsfiddle but I'm having massive issues. jsfiddle

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
        div:not(#div0) {
    display: none;
}
    </style>
    <script src="js_files/snippet-javascript-console.js"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
    </head>
<body>
    <script src="js_files/jquery.js"></script>
<a href="#" data-toggle="#div1">div1</a><br>
    <div id="div1">div1 information</div>
    <a href="#" data-toggle="#div2">div2</a>
    <br>
    <div id="div2">div2 information?</div>
    <a href="#" data-toggle="#div3">div3</a>
    <br>
    <div id="div3">div3 information</div>
    <a href="#" data-toggle="#div4">div4</a>
    <br>
    <div id="div4">div4</div>
    <a href="#" data-toggle="#div5">div5</a>
    <br>
    <div id="div5">div5 information</div>
    <a href="#" data-toggle="#div6">div6</a>
    <br>
    <div id="div6">div6 information</div>
    <a href="#" data-toggle="#div7">div7</a><br>
    <div id="div7">div7 information</div>
    <script type="text/javascript">
        $("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("div").hide();
  $(selector).show();
});
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>

This is the snippet from within stackoverflow.

 $("a[data-toggle]").on("click", function(e) { e.preventDefault(); // prevent navigating var selector = $(this).data("toggle"); // get corresponding element $("div").hide(); $(selector).show(); });

 div:not(#div0) { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" data-toggle="#div1">div1</a><br> <div id="div1">div1 information</div> <a href="#" data-toggle="#div2">div2</a> <br> <div id="div2">div2 information?</div> <a href="#" data-toggle="#div3">div3</a> <br> <div id="div3">div3 information</div> <a href="#" data-toggle="#div4">div4</a> <br> <div id="div4">div4</div> <a href="#" data-toggle="#div5">div5</a> <br> <div id="div5">div5 information</div> <a href="#" data-toggle="#div6">div6</a> <br> <div id="div6">div6 information</div> <a href="#" data-toggle="#div7">div7</a><br> <div id="div7">div7 information</div>

Thank you so much!!!

Answer 1

If your jQuery .toggle() / .show() / .hide() methods are not working in Microsoft Dynamics CRM 2013, you can toggle the divs with CSS alone.

Working Example:

 a { display: block; line-height: 36px; cursor: pointer; } a + div { display: none; margin: -48px 0 12px; padding-top: 48px; } div:target { display: block; }

 <a href="#div1">div1</a> <div id="div1">div1 information</div> <a href="#div2">div2</a> <div id="div2">div2 information</div> <a href="#div3">div3</a> <div id="div3">div3 information</div> <a href="#div4">div4</a> <div id="div4">div4 information</div> <a href="#div5">div5</a> <div id="div5">div5 information</div> <a href="#div6">div6</a> <div id="div6">div6 information</div> <a href="#div7">div7</a> <div id="div7">div7 information</div>

Toggle Divs working on web but not in CRM 2013

Question

1 answers

solution1
1 ACCPTED 2017-01-14 23:00:10

Toggle Divs working on web but not in CRM 2013

Question

1 answers

solution1 1 ACCPTED 2017-01-14 23:00:10

solution1
1 ACCPTED 2017-01-14 23:00:10