Click here to Skip to main content
15,891,951 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey guys i have this accordion on a live app.
but i want to change it so that if you click on the text above the accordion it opens another html page.
here is the html and .JS file for that piece of the page!
working on
-vs express for windows phone
-phiegap/cordova1.9
-html5,CSS,javascript,jquery
-c#

any help will be appreciated
HTML
XML
<div id="AccordionContainer" class="AccordionContainer"></div>
    <div onclick="runAccordion(1)">
      <div class="Accordiontitle" onselectstart="return false;">
        <input class="followThisRel" type="button" href="ItemPages.html"> Accordion Title</input>
        <br/>
        <a>POS556446x</a>
      </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
      <form>
        <p>
          <label for="create" >Created by :</label>
          <input type="text" style="margin-left:60px;" size="22" id="create"/>
        </p>
        <p>
          <label for="createdate" >Created Date :</label>
          <input type="text" style="margin-left:43px;" size="22" id="createdate"/>
        </p>
        <p>
          <label for="process" >Process name :</label>
          <input type="text" style="margin-left:36px;" size="22" id="process"/>
        </p>
        <p>
          <label for="transtype">Transaction type :</label>
          <input type="text" style="margin-left:20px;" size="22" id="transtype"/>
        </p>
        <p>
          <label for="lastact">Last action :</label>
          <input type="text" style="margin-left:61px;" size="22" id="lastact"/>
        </p>
        <p>
          <label for="lastuser">Last user :</label>
          <input type="text" style="margin-left:73px;" size="22" id="lastuser"/>
        </p>
        <p>
          <label for="lastupd">Last update :</label>
          <input type="text" style="margin-left:55px;" size="22" id="lastupd"/>
        </p>
        <p>
          <label for="duration">Duration :</label>
          <input type="text" style="margin-left:78px;" size="22" id="duration"/>
        </p>
        <p>
          <label for="saved">Saved :</label>
          <input type="text" style="margin-left:93px;" size="22" id="saved"/>
        </p>
        <p>
          <label for="adhoc">Ad hoc user :</label>
          <input type="text" style="margin-left:53px;" size="22" id="adhoc"/>
        </p>
      </form>
    </div>


here is the .js file

C#
var ContentHeight = 200;
    var TimeToSlide = 250.0;

    var openAccordion = '';

    function runAccordion(index) {
    var nID = "Accordion" + index + "Content";
    if (openAccordion == nID)
    nID = '';

    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

    openAccordion = nID;
    }

    function animate(lastTick, timeLeft, closingId, openingId) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);

    if (timeLeft <= elapsedTicks) {
    if (opening != null)
    opening.style.height = ContentHeight + 'px';

    if (closing != null) {
    closing.style.display = 'none';
    closing.style.height = '0px';
    }
    return;
    }

    timeLeft -= elapsedTicks;
    var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

    if (opening != null) {
    if (opening.style.display != 'block')
    opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
    }

    if (closing != null)
    closing.style.height = newClosedHeight + 'px';

    setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
    }


this is the piece of coding that should act as a "button" to navigate to the new page!

<input class="followThisRel" type="button" href="ItemPages.html"> Accordion Title</input>

please help :)
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900