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

Utilize Jquery to dynamically modify the content on a webpage

Coinciding titles within flot pie chart

Sort through a list of objects using the criteria from a separate array

Tips for transferring data from a parent component to a child component in React?

Unable to stop interval in Angular 5 application

Error: Attempting to access index '0' of an undefined property in firebase and vuex

Trouble locating SVG element in Google Calendar when using Python

How to correct header alignment in HTML for Google Table

Implementing Event Handlers for Multiple Textareas Using Jquery on a Webpage

Locate and substitute `?php` and `?` in a given string

Error: Firebase Cloud Functions reference issue with FCM

Creating a notification for specific choices in a dropdown menu

Interactive HTML5 map featuring geo tagged points

Whenever I am building a React application, I encounter a bug that states: "node:fs:1380 const result = binding.mkdir()"

Nodemailer is experiencing issues with displaying HTML content correctly

When referencing a particular React commit in package.json, it may result in the installation of react-tools instead of react itself

Having trouble with ReactJS rendering components?

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Applying a consistent script with varying inputs on the same HTML page

Tips for configuring ejs data within the data attribute and processing it using client-side JavaScript