Hi,
Actually the accordion with bootstrap 3.4.1 is working fine. Also attached the code (Bootstrap3.4.1_Working.txt) .
Expected:
The requirement is to click on the plus or minus to function accordingly. So we added the bootstrap 5.0.2 (link), but it didn't work. Also attached the code.
Code:
Below is the code which is working with Bootstrap 3.4.1:
var html = '<html>';
try {
html += '<head>';
html += '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">';
html += '<style>html {margin-left: calc(100vw - 100%);margin-right: 0; } .container{width:100%;margin:0 auto;padding:0 1.5rem;}.accordian-item{background-color:#ffffff; border-radius:.4rem; padding:1rem; margin-bottom:0rem; padding:0rem;}.accordian-link{background-color:#ffffff; text-decoration:none;width:100%;display:block;align-items:center;}.accordian-link i{color:#e7d5ff;}.answer{max-height:0;overflow:hidden;position:relative;background-color:#D8DEE0;color:rgba(255,255,255,.6);font-size:1.4rem;transition:max-height 600ms;border-color: D8DEE0;}.answer::before{content:"";position:absolute;background-color:#D8DEE0;height:100%;width:.6rem;top:50%;left:0;transform:translateY(-50%);}.answer p{font-family:Arial;font-size:1.4rem;color:rgba(255,255,255,.6);padding :1rem;}.accordian-link .ion-md-remove{display:none;}.accordian-item:hover .answer{max-height:20rem;}.accordian-item:hover .accordian-link .plus{display:none;}.accordian-item:hover .accordian-link .minus{display:block;}.minus{display:none;}.sortable tr{cursor: pointer;}#tableid th:hover{cursor: pointer;}</style>';
html += '</head>';
html += '<body >';
html +='<hr style="margin-top: 0px;margin-bottom: 0px;">';
html +='<div class="container">';
html +='<h2>Pump<h2>';
//add 1
html +='<div class="accordian-item">';
html +='<div class="accordian-link" style="width:100%">';
html += '<table style="border-collapse: collapse;" id="tableid">';
html +='<tr height="53" style="border-bottom: 1px solid #D8DEE0">';
html += '<th width="18.5%"><label for="exampleCheck1" style="font-weight:normal;text-align:left;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;">Pump - Internal Recirculation Flow</label></th>';
html += '<th width="2%"><img src=' + irfIndicator + ' alt="" style="text-align:left;height:32%;margin-top: -6px;"></th>';
html += '<th width="15%"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 18px;">' + irfTxt + '</label></th> ';
html += '<th width="8%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="13%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="5%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="14%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th> ';
html += '<th width="4%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="15.5%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="4%" style="text-align: left;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;margin-left: -22px;"></label></th>';
//html += '<th width="5%"><img src='+masked+'alt="" style="text-align:left;height:40%;margin-top: -4px;margin-left: -12px;"></th>';
html += '<th style="align-items:center"><img class="plus" src=/Thingworx/MediaEntities/PlusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '<th style="align-items:center"><img class="minus" src=/Thingworx/MediaEntities/MinusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '<div class="answer">';
html += '<table width="100%">';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding-left:20px;margin-top:-15px;padding-top:5px;">Implications</label></th></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding:1px;padding-top:5px;">Possible Solution</label></th>';
html += '</tr>';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding-left:20px;padding-bottom:5px;">' + irfImp + '</label></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding:1px;padding-bottom:5px;">' + irfSol + '</label></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '</div>';
//add 1
html +='<div class="accordian-item">';
html +='<div class="accordian-link" style="width:100%">';
html += '<table style="border-collapse: collapse;" id="tableid">';
html +='<tr height="53" style="border-bottom: 1px solid #D8DEE0">';
html += '<th width="18.5%"><label for="exampleCheck1" style="font-weight:normal;text-align:left;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;">Pump - Flow Capacity</label></th>';
html += '<th width="2%"><img src=' + fcIndicator + ' alt="" style="text-align:left;height:32%;margin-top: -6px;"></th>';
html += '<th width="15%"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 18px;">' + fcTxt + '</label></th> ';
html += '<th width="8%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="13%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="5%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="14%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th> ';
html += '<th width="4%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="15.5%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="4%" style="text-align: left;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;margin-left: -22px;"></label></th>';
//html += '<th width="5%"><img src='+masked+' alt="" style="text-align:left;height:40%;margin-top: -4px;margin-left: -12px;"></th>';
html += '<th style="align-items:center"><img class="plus" src=/Thingworx/MediaEntities/PlusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '<th style="align-items:center"><img class="minus" src=/Thingworx/MediaEntities/MinusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '<div class="answer">';
html += '<table width="100%">';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding-left:20px;margin-top:-15px;padding-top:5px;">Implications</label></th></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding:1px;padding-top:5px;">Possible Solution</label></th>';
html += '</tr>';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding-left:20px;padding-bottom:5px;">' + fcImp + '</label></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding:1px;padding-bottom:5px;">' + fcSol + '</label></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '</div>';
//add 1
html +='<div class="accordian-item">';
html +='<div class="accordian-link" style="width:100%">';
html += '<table style="border-collapse: collapse;" id="tableid">';
html +='<tr height="53" style="border-bottom: 1px solid #D8DEE0">';
html += '<th width="18.5%"><label for="exampleCheck1" style="font-weight:normal;text-align:left;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;">Pump - Energy Efficiency</label></th>';
html += '<th width="2%"><img src=' + eeIndicator + ' alt="" style="text-align:left;height:32%;margin-top: -6px;"></th>';
html += '<th width="15%"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 16px;font-weight: 700;line-height: 18px;">' + eeTxt + '</label></th> ';
html += '<th width="8%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="13%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="5%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="14%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th> ';
html += '<th width="4%" style="text-align: right;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;"></label></th>';
html += '<th width="15.5%" style="text-align: left;"><label for="exampleCheck1" style="text-align:left;color: #2D363C;font-family: Arial;font-size: 20px;font-weight: 700;line-height: 22px;margin-left: 7px;"></label></th>';
html += '<th width="4%" style="text-align: left;"><label for="exampleCheck1" style="font-weight:normal;text-align:right;color: #7B858C;font-family: Arial;font-size: 14px;line-height: 16px;margin-left: -22px;"></label></th>';
//html += '<th width="5%"><img src='+masked+' alt="" style="text-align:left;height:40%;margin-top: -4px;margin-left: -12px;"></th>';
html += '<th style="align-items:center"><img class="plus" src=/Thingworx/MediaEntities/PlusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '<th style="align-items:center"><img class="minus" src=/Thingworx/MediaEntities/MinusSymbol alt="" style="text-align:left;height:40%;margin-top: 2px;margin-left: 12px;"></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '<div class="answer">';
html += '<table width="100%">';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding-left:20px;margin-top:-15px;padding-top:5px;">Implications</label></th></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 20px;line-height: 22px;padding:1px;padding-top:5px;">Possible Solution</label></th>';
html += '</tr>';
html += '<tr>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding-left:20px;padding-bottom:5px;">' + eeImp + '</label></th>';
html += '<th width="10%"></th>';
html += '<th width="45%"><label for="exampleCheck1" style="color: #2D363C;font-family: Arial;font-size: 14px;line-height: 20px;padding:1px;padding-bottom:5px;">' + eeSol + '</label></th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '</div>';
html +='</div>';
html +='</div>';
html += '</body>';
html += '</html>';
} catch (ex) {
logger.error("error" + ex);
}
result = html;
Need to why it is not taking the js files. I don't want the hover operation, I need only the click(plus and minus) operation.
Bootstrap 5.0.2 which is not working:
var html = '<html>';
try {
html += '<head>';
html += '<link href="./css/bootstrap.min.css" rel="stylesheet">';
html += '<script src="./js/bootstrap.bundle.min.js"></script>';
html += '<style>.accordion-collapse {border: 0;}.accordion-button {padding: 0px;font-weight: bold;border: 0;font-size: 18px;color: #333333;text-align: left; border-bottom: 1px solid #ddd;}.accordion-button:focus { box-shadow: none;border: none;}.accordion-button:not(.collapsed) {background: none;color: #dc3545;}.accordion-body {padding: 15px; background-color: #f6f6f6;}.accordion-button::after {width: auto;height: auto;content: "+";font-size: 40px; background-image: none; font-weight: 100; color: #1b6ce5; transform: translateY(-4px);}.accordion-button:not(.collapsed)::after { width: auto; height: auto; background-image: none; content: "-"; font-size: 48px; transform: translate(-5px, -4px);transform: rotate(0deg);}</style>';
html += '</head>';
html += '<body >';
html +='<hr style="margin-top: 0px;margin-bottom: 0px;">';
html +='<div class="container">';
html +='<h2>Pump<h2>';
html += '<div class="row">';
html += '<div class="col offset">';
html += '<div class="accordion accordion-flush" id="faqlist">';
html += '<table style="width:100%">';
html += '<tr class="accordion-header">';
html += '<th class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">';
html += 'What is Lorem Ipsum?';
html += '</th>';
html += '</tr>';
html += '<tr>';
html += '<th id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">';
html += 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
html += '</th>';
html += '</tr>';
html += '<tr class="accordion-header">';
html += '<th class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-2">';
html += 'What is Test?';
html += '</th>';
html += '</tr>';
html += '<tr>';
html += '<th id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist">';
html += 'Test is simply dummy text of the printing and typesetting industry.';
html += '</th>';
html += '</tr>';
html += '</table>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html +='</div>';
html +='</div>';
html += '</body>';
html += '</html>';
} catch (ex) {
logger.error("error" + ex);
}
result = html;
Expecting the solution ASAP.
Thanks
