Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How do I make it so links only display when clicki...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How do I make it so links only display when clicking on the h1 tag?
I have a dashboard with a panel which has a heading(h1 tag) and two links under it . Now, I want to display those two links only when I click on the h1 tag, which means by default links should not be shown. The sample code which I use is shown below:
<row>
<panel>
<title></title>
<html>
<h1>Click Here</h1>
<a href="https/xyz?"><h3>link to dashboard 1</h3></a>
<a href="https:events/abc? "><h3>link to dashboard 2</h3></a>
</html>
</panel>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Try the following run anywhere example in Simple XML (no JS required), which use Splunk link input to set the token for secondary links to be displayed. CSS style can be overridden using Simple XML CSS Extension which has not been added to keep the example simple!
<form>
<label>Show Secondary Links on Click of Main Link</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<input type="link" token="tokTitle" searchWhenChanged="true">
<label></label>
<choice value="panel-title">Panel Title (to be clicked)</choice>
<change>
<condition value="panel-title">
<set token="tokShowSecondaryLink">true</set>
<unset token="tokTitle"></unset>
</condition>
<condition>
<unset token="tokTitle"></unset>
</condition>
</change>
</input>
<html>
<div>tokShowSecondaryLink: $tokShowSecondaryLink$</div>
<div>tokTitle: $tokTitle$</div>
</html>
<html depends="$tokShowSecondaryLink$">
<div>
<a href="https/xyz?"><h3>link to dashboard 1</h3></a>
<a href="https:events/abc? "><h3>link to dashboard 2</h3></a>
</div>
</html>
</panel>
</row>
</form>
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@navd Clicking on h1 will show the secondary link, however, what will hide it again or rather what keeps it hidden?
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Try this:
<dashboard script="linktest.js">
<row>
<html>
<h1 id="link">Click Here</h1>
<div id="testDiv" style="display:none;"> <a href="http://www.google.com">go to google</a></div>
</html>
</row>
</dashboard>
linktest.js:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/utils',
'splunkjs/mvc/tokenutils',
'splunkjs/mvc/simplexml/ready!'], function(_, $, mvc, utils, TokenUtils){
var tokens = mvc.Components.get('default');
$("#link").on("click", function (e){
console.log("link clicked....");
document.getElementById('testDiv').style.display = "block";
});
});
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
make sure you bump the server after doing the change, otherwise the js will not be loaded.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @navd,
Thanks for posting. Could you give us some more context for your query? What were you trying to do with this, etc.. You have a much better chance of getting your question answered if you provide more information about your issue. Plus, it will help guide future community users who are facing a similar problem.
.conf25 Community Recap
Splunk App Developers | .conf25 Recap & What’s Next
Congratulations to the 2025-2026 SplunkTrust!
