CODEWITHSUNDEEP
javascriptjquerywordpress
Rob
Rob

Reputation: 2472

Javascript action on bookmark click

I am running a Wordpress site (Divi themes), and it has the ability to add code to specific pages. I have a page with a left sidebar showing the table of contents, a middle text with a description, and a right sidebar with an example. The site is here: logan.pverify.com/rest-api.

When the user clicks on the table of contents, it's a hyperlink bookmark #foo. That part is fine. But I want javascript to launch and display code examples on the right sidebar (i envision this to be a series of divs that are hidden or visible). There are only 5 or so sections to the whole thing so it's not all that bad.

Anyway. I can't figure out if it is even possible to do this. I managed to get js code working. Laughable, but it's a start. I am mostly a C# winforms guy.

<script>
jQuery(function($){
    alert('hello');
});
</script>

Upvotes: 0

Views: 2302

Answers (4)

Rob
Rob

Reputation: 2472

I ended up doing a few things, which I thought I would mention. Again this is for a wordpress site. The net effect is that the "main" TOC headers will link to that section of the text as a bookmark. The code will show all the divs. The subheaders with individual endpoint documentation will hide all the divs except for one main and one example. So the net effect is that at the top of the page you can see both an example and description. Thanks to everyone, this is probably a mix of what everyone was thinking.

On the left there is a sidebar for the table of contents, and it's code is here:

<a href="#Overview" onclick="showAll()" >Overview</a>
<br>
<a href="#ClientLibraries" onclick="showAll()" >Client Libraries</a>
<br>
<a href="#Security" onclick="showAll()" >Security and Authorization</a>
<br>
&emsp; &emsp;<a href="#Token" onclick="showBookmark(this)">Token</a>
<br>
<a href="#Endpoints" onclick="showAll()" >Available API Endpoints</a>
<br>
&emsp; &emsp; <a href="#EligibilityInquiry" onclick="showBookmark(this)">EligibilityInquiry</a>
<br>
&emsp; &emsp;
<a href="#GetEligibilityInquiry" onclick="showBookmark(this)">GetEligibilityInquiry</a>
<br>
&emsp; &emsp;
<a href="#GetPayers" onclick="showBookmark(this)">GetPayers</a>

The main body has code like this:

<p id="Overview" /> <div id="OverviewMain" class="bookmark" style="display: block;"> </div>

The right sidebar with the examples has code like this:

<div id="TokenExample" class="bookmark" style="display: none;"> </div>

And the JS is in a code module in Divi.

<script>
function showBookmark(link) {

   var bookmark = jQuery(link).attr('href').split('#')[1]; //find clicked section
   jQuery('.bookmark').css("display", "none"); // hide all sections
   jQuery('#' + bookmark  + 'Example').show();
   jQuery('#' + bookmark  + 'Main').show();
 }
function showAll() {
   jQuery('.bookmark').css("display", "block"); // show all sections
}
</script>

Upvotes: 0

nikunjM
nikunjM

Reputation: 590

HTML

<div class="form" id="form1">Form 1</div>
<div class="form" id="form2">Form 2</div>
<div class="form" id="form3">Form 3</div>

<div class="nav">
     <a href="#form1">click to see #form1</a>
     <a href="#form2">click to see #form2</a>
     <a href="#form3">click to see #form3</a>
</div>

jquery

$(".nav a").click(function(){

    var attr = $(this).attr("href");
    $(attr).show();
    $(attr).siblings(".form").hide();
    

});

Css

.form{
   display:none;
    width: 150px;
    height: 150px;
    color: white;
    font-size: 16px;
}

#form1{
    background-color: red;
}

#form2{
    background-color: blue;
}

#form3{
    background-color: black;
}

Working Example

http://jsfiddle.net/8u7n2/

This will just hight light the div

http://jsfiddle.net/3gkAV/

They are two different examples and will give you a good idea.

Upvotes: 1

kharhys
kharhys

Reputation: 257

You will need to give a unique id and a class=bookmark to each of the hidden div that you envision that corresponds with a hyperlink bookmark on the table of content. For instance, the link #foo should have a hidden div with id foo. Add an onclick=showSection(this) handler to each link in the table of content and a function showSection that looks like

function showSection(link) {
  var bookmark = $(link).attr('href').split('#')[1] //find clicked section
  $('.bookmark').show() // hide all sections
  $('#' + bookmark).show() //show only clicked section
}

I assume the bookmark links are html anchor tags in the form foo.com/#bar

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

All you need to do is first make the element hidden by default in the CSS, and then attach a click event handler to the visible element with the .on() method. This handler should change the CSS display property of the invisible element (in this example, to block) with use of the .css() method:

$("#visible").on("click", function() {
  $("#hidden").css("display", "block");
});
#hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="visible">
  Visible
</button>

<div id="hidden">
  Hidden content
</div>

Hope this helps! :)

Upvotes: 1

Related Questions