Can I link the accordion title to a different webpage?

Question

Can I link the accordion title to a different webpage?

Is it possible to turn the title of an accordion into a button without it looking like a button? Here is an image of the accordion title and some accompanying data. I want to be able to click on the text in the title to navigate to another page. I am working with PhoneGap/Cordova v1.9, Visual Studio 2010 Express for Windows Phone, HTML, CSS, JavaScript (C#). Any assistance would be greatly appreciated :) I am open to using solutions that involve jQuery as well.

The title is inboxentry1 POS556445. The accordion is constructed using a series of stacked div elements. Let me know if there are any additional details needed to help find a solution! Below is the HTML code for the accordion:

<div id="AccordionContainer" class="AccordionContainer"></div>
    <div onclick="runAccordion(1)">
      <div class="Accordiontitle" onselectstart="return false;">
        <input type="button" href="ItemPages.html">inbox entry1</input>
        <br/>
        <a>POS556446x</a>      
      </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
     [Content within the Accordion]
    </div>

Below is my .js file with the necessary functions to handle the accordion animations.

    var ContentHeight = 200;
  var TimeToSlide = 250.0;

  var openAccordion = '';

 [Functions for Animating Accordion]

javascript css html cordova

Answer 1

Answer №1

If you're looking to tweak things a bit, there are some adjustments that need to be made. Additional classes have been included and the button tag has been altered for accuracy. It's important to eliminate the inline event associated with the accordion and relocate it as indicated below.

<div class="AccordionRun">
  <div class="Accordiontitle" onselectstart="return false;">
    <input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
    <br/>
    <a>POS556446x</a>      
  </div>
</div>

Once you've adjusted this part, proceed by adding a click event...

var goToPage = function(elem) {
    elem.onclick = function() {
        alert('Go to page...');
        window.location = elem.href;
    };
};

var runAccordion = function(elem) {
    elem.onclick = function() {
        alert('Run Accordion...');
        // Your accordion code goes here...
    }; 
};

var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
    if (buttons[i].className == 'AccordionLink') {
       goToPage(buttons[i]);             
    }
}

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
    if (divs[i].className == 'AccordionRun') {
       runAccordion(divs[i]);             
    }
}

Check out the updated version on jsfiddle.net/FKt4K/2

Answer 2

If you're looking to tweak things a bit, there are some adjustments that need to be made. Additional classes have been included and the button tag has been altered for accuracy. It's important to eliminate the inline event associated with the accordion and relocate it as indicated below.

<div class="AccordionRun">
  <div class="Accordiontitle" onselectstart="return false;">
    <input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
    <br/>
    <a>POS556446x</a>      
  </div>
</div>

Once you've adjusted this part, proceed by adding a click event...

var goToPage = function(elem) {
    elem.onclick = function() {
        alert('Go to page...');
        window.location = elem.href;
    };
};

var runAccordion = function(elem) {
    elem.onclick = function() {
        alert('Run Accordion...');
        // Your accordion code goes here...
    }; 
};

var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
    if (buttons[i].className == 'AccordionLink') {
       goToPage(buttons[i]);             
    }
}

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
    if (divs[i].className == 'AccordionRun') {
       runAccordion(divs[i]);             
    }
}

Check out the updated version on jsfiddle.net/FKt4K/2

Answer 3

Answer №2

If you want to redirect to another page when clicking on an input field, here's a simple solution. Just bind it to a mouseup event like this (requires jQuery):

UPDATED SOLUTION

HTML:

 <input class="redirectOnClick" type="button" data-url="http://example.com/">

JS:

$(function() {
    $('input.redirectOnClick').on('click', function() {
        var url = $(this).data('url');
        window.location = url;
    });
})

Answer 4

If you want to redirect to another page when clicking on an input field, here's a simple solution. Just bind it to a mouseup event like this (requires jQuery):

UPDATED SOLUTION

HTML:

 <input class="redirectOnClick" type="button" data-url="http://example.com/">

JS:

$(function() {
    $('input.redirectOnClick').on('click', function() {
        var url = $(this).data('url');
        window.location = url;
    });
})

Can I link the accordion title to a different webpage?

Answer №1

Answer №2

Similar questions

Encase the event handler within JQuery

Code for refreshing content using AJAX

Employing the HTML element `<input type="slider">`

Switching between various quantities of inputs in each row using Bootstrap V3

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

Mapping a list of keys to Firebase objects in Vue.js

When running npx webpack, an error occurred stating, "Property 'minify' cannot be read from undefined."

Find the correct file path for input using JavaScript or Angular 2

Show only half of the Google Charts

Managing multiple JQuery Dialog boxes can be tricky, especially when you can only close one instance at a time

Organize chat messages based on date using JavaScript

What are the steps to store a firebase storage downloadURL in a firestore collection?

The nested navigation bar is not displaying properly below the main navigation bar

Creating custom events in a JavaScript constructor function

Issue with interaction between jQuery AJAX and PHP login functionality

Experimenting with an rxjs service to perform a GET request within the component

The Bootstrap nav bar toggle feature is failing to toggle

Display an image when the iframe viewport is reduced in size by utilizing media queries

The JQuery loading symbol does not prevent keyboard interactions

The function `req.on('end', callback)` in Node.js is not functioning as expected