diff --git a/addform.html b/addform.html
index 2288f5f..48e0250 100644
--- a/addform.html
+++ b/addform.html
@@ -542,6 +542,12 @@
 
 	<!-- nave pane -->
 	<script src="nav_pane.js"></script>
+<!-- <script>
+	var questionPaperElement = document.getElementById("questionPaper");
+	function saveoldnav(){
+		localStorage.setItem("OLD_JSON_FOR_NAV", JSON.stringify((questionPaperElement)));
+	}
+</script> -->
 <script>
 	var sidebarWrapper = document.getElementById("questionPaper");
 
diff --git a/nav_pane.js b/nav_pane.js
index 4b29226..2a451e9 100644
--- a/nav_pane.js
+++ b/nav_pane.js
@@ -1,3 +1,5 @@
+// Initialize an array to store the expanded section data-ids
+const expandedSections = [];
 function navpane() {
     // Sample JSON data
     let isHighlighted = false;
@@ -9,207 +11,220 @@ function navpane() {
     // console.log(typeof jsonData);
     // console.log('jsonData', jsonData);
 
-    // Function to remove <p></p> tags from HTML content
+   
+
     function removeParagraphTags(html) {
-        // console.log('html:', html);
         return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
     }
-
+    
     function createTreeWithHeading(data, container) {
-        // console.log('data', data.question_paper_title);
-        // Extract the treeTitle from the JSON data and remove <p></p> tags
         const treeTitle = removeParagraphTags(data.question_paper_title);
-
-        // Create the heading element
-        const heading = document.createElement('a'); // You can use h1, h2, div, or any other suitable HTML element
+        const heading = document.createElement('a');
         heading.style.color = '#740fd6';
-
         const truncatedTitle = treeTitle.length > 20 ? treeTitle.substring(0, 20) + '.....' : treeTitle;
-        heading.innerHTML = truncatedTitle; // Set the text content of the heading (with HTML tags removed)
-        // heading.style.fontSize = 'x-large'; // Set the font size
-        // heading.style.marginLeft = '26px';
+        heading.innerHTML = truncatedTitle;
         container.appendChild(heading);
-
-        // Create the tree structure
         createTree(data, container);
     }
-
-    // Function to create the collapsible tree
+    
     function createTree(data, container) {
         data.sections.forEach(section => {
             const sectionDiv = document.createElement('div');
-            // const sectionId = section.section_id;
+            const sectionId = section.section_id;
+            sectionDiv.setAttribute('data-id', sectionId);
             sectionDiv.className = 'section main-heading';
-            // sectionDiv.id = sectionId;
-            // console.log('sectionDiv', sectionDiv)
-            container.appendChild(sectionDiv);
-
-            // Create arrow icon element
-            const sectionArrow = document.createElement('span');
-            sectionArrow.className = 'arrow-right';
-            sectionArrow.style.cursor = 'pointer'; // Set cursor to pointer
-            sectionDiv.appendChild(sectionArrow);
-
-            // Click event listener for the arrow icon
-            sectionArrow.addEventListener('click', () => {
-                contentDiv.classList.toggle('visible');
-                sectionDiv.classList.toggle('collapsed');
-                if (sectionDiv.classList.contains('collapsed')) {
-                    sectionArrow.classList.remove('arrow-right');
-                    sectionArrow.classList.add('arrow-down');
-                } else {
-                    sectionArrow.classList.remove('arrow-down');
-                    sectionArrow.classList.add('arrow-right');
-                }
-            });
-
-            const sectionLink = document.createElement('a');
-            sectionLink.href = '#' + section.section_id;
-            sectionLink.style.color = '#740fd6';
-
-            // Add a click event listener to toggle highlighting and boldness
-            sectionLink.addEventListener('click', function () {
-                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
-                    // Remove highlight from the previously highlighted element
-                    currentlyHighlightedElement.style.fontWeight = 'normal';
-                }
-
-                if (currentlyHighlightedElement === sectionLink) {
-                    // Toggle highlight on the current element
-                    sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
-                } else {
-                    // Make the text bold
-                    sectionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
-                    currentlyHighlightedElement = sectionLink;
-                }
-            });
-
-            if (section.section_title == null || typeof section.section_title === 'undefined') {
-                section.section_title = "sampletitle";
+    
+            // Check if the section should be initially expanded based on expandedSections
+            if (expandedSections.includes(sectionId)) {
+                sectionDiv.classList.remove('collapsed');
+                
+            } else {
+                sectionDiv.classList.add('collapsed');
             }
-
-            sectionLink.innerHTML = removeParagraphTags(section.section_title);
-            sectionDiv.appendChild(sectionLink);
+    
+            container.appendChild(sectionDiv);
+    
+            const sectionArrow = document.createElement('span');
+            sectionArrow.style.cursor = 'pointer';
+            sectionDiv.appendChild(sectionArrow);
 
             const contentDiv = document.createElement('div');
             contentDiv.className = 'content';
+
+            // Update the arrow icon based on the section's initial state
+            if (sectionDiv.classList.contains('collapsed')) {
+                sectionArrow.className = 'arrow-right';
+            } else {
+                sectionArrow.className = 'arrow-down';
+                contentDiv.classList.add('visible');
+            }
+
+            sectionArrow.addEventListener('click', () => {
+                contentDiv.classList.toggle('visible');
+                sectionDiv.classList.toggle('collapsed');
+    
+                // Check if the section is expanded or collapsed
+                if (sectionDiv.classList.contains('collapsed')) {
+                    const index = expandedSections.indexOf(sectionId);
+                    if (index !== -1) {
+                        expandedSections.splice(index, 1);
+                    }
+                    sectionArrow.classList.remove('arrow-down');
+                    sectionArrow.classList.add('arrow-right');
+                } else {
+                    expandedSections.push(sectionId);
+                    sectionArrow.classList.remove('arrow-right');
+                    sectionArrow.classList.add('arrow-down');
+                }
+            });
+    
+            const sectionLink = document.createElement('a');
+            sectionLink.href = '#' + section.section_id;
+            sectionLink.style.color = '#740fd6';
+    
+            // Add a click event listener to toggle highlighting and boldness
+            sectionLink.addEventListener('click', function () {
+                if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== sectionLink) {
+                    currentlyHighlightedElement.style.fontWeight = 'normal';
+                }
+    
+                if (currentlyHighlightedElement === sectionLink) {
+                    sectionLink.style.fontWeight = sectionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
+                } else {
+                    sectionLink.style.fontWeight = 'bold';
+                    currentlyHighlightedElement = sectionLink;
+                }
+            });
+    
+            if (section.section_title == null || typeof section.section_title === 'undefined') {
+                section.section_title = "sampletitle";
+            }
+    
+            sectionLink.innerHTML = removeParagraphTags(section.section_title);
+            sectionDiv.appendChild(sectionLink);
+    
             section.questions.forEach(question => {
                 createTreeNode(question, contentDiv);
             });
-
+    
             container.appendChild(contentDiv);
         });
     }
-
+    
     function createTreeNode(nodeData, parentNode) {
         const nodeDiv = document.createElement('div');
-        // nodeDiv.id = nodeData.textQuestion_Id || nodeData.choice_question_id;
-        const nodeDataId = nodeData.textQuestion_Id || nodeData.choice_question_id;
+        const nodeDataId = nodeData.question_Id;
+    
         parentNode.appendChild(nodeDiv);
-
+    
         if (nodeData.question) {
-            // Create a bullet point element
             const bulletPoint = document.createElement('span');
-            // Style the bullet point element
-            bulletPoint.style.marginRight = '10px'; // Add space to the right of the bullet point
+            bulletPoint.style.marginRight = '10px';
             bulletPoint.style.fontSize = '23px';
             bulletPoint.style.fontWeight = 'bold';
-            bulletPoint.style.color = 'darkgray'; // Change the color of the bullet point
-            bulletPoint.textContent = '\u2022'; // Unicode character for a bullet point dot
-            // Append the bullet point element to the nodeDiv
+            bulletPoint.style.color = 'darkgray';
+            bulletPoint.textContent = '\u2022';
             nodeDiv.appendChild(bulletPoint);
-
+    
             const questionLink = document.createElement('a');
-            // console.log('nodeDiv.id:', nodeDataId);
             questionLink.href = '#' + nodeDataId;
             questionLink.style.color = '#740fd6';
-
-            // Add a click event listener to toggle highlighting and boldness
+    
             questionLink.addEventListener('click', function () {
                 if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== questionLink) {
-                    // Remove highlight from the previously highlighted element
                     currentlyHighlightedElement.style.fontWeight = 'normal';
                 }
-
+    
                 if (currentlyHighlightedElement === questionLink) {
-                    // Toggle highlight on the current element
                     questionLink.style.fontWeight = questionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                 } else {
-                    // Make the text bold
                     questionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
                     currentlyHighlightedElement = questionLink;
                 }
             });
-
-            // Check if the question text is longer than 20 characters
+    
             if (nodeData.question.length > 20) {
                 questionLink.innerHTML = removeParagraphTags(nodeData.question.substring(0, 20) + '.....');
             } else {
                 questionLink.innerHTML = removeParagraphTags(nodeData.question);
             }
-
+    
             nodeDiv.appendChild(questionLink);
         } else if (nodeData.group_title) {
             const groupTitleDiv = document.createElement('div');
             const groupTitleId = nodeData.question_group_id;
+            groupTitleDiv.setAttribute('data-id', groupTitleId);
             groupTitleDiv.className = 'question-group';
-            // groupTitleDiv.id = groupTitleId;
+    
+            // Check if the group should be initially expanded based on expandedSections
+            if (expandedSections.includes(groupTitleId)) {
+                groupTitleDiv.classList.remove('collapsed');
+            } else {
+                groupTitleDiv.classList.add('collapsed');
+            }
+    
             parentNode.appendChild(groupTitleDiv);
-
-            // Create arrow icon element for group title
+    
             const groupTitleArrow = document.createElement('span');
             groupTitleArrow.className = 'arrow-right';
-            groupTitleArrow.style.cursor = 'pointer'; // Set cursor to pointer
+            groupTitleArrow.style.cursor = 'pointer';
             groupTitleDiv.appendChild(groupTitleArrow);
 
-            // Click event listener for the arrow icon
+            const groupQuestionsDiv = document.createElement('div');
+            groupQuestionsDiv.className = 'content';
+
+            // Update the arrow icon based on the section's initial state
+            if (groupTitleDiv.classList.contains('collapsed')) {
+                groupTitleArrow.className = 'arrow-right';
+            } else {
+                groupTitleArrow.className = 'arrow-down';
+                groupQuestionsDiv.classList.add('visible');
+            }
+    
             groupTitleArrow.addEventListener('click', () => {
                 groupQuestionsDiv.classList.toggle('visible');
                 groupTitleDiv.classList.toggle('collapsed');
+    
+                // Check if the group is expanded or collapsed
                 if (groupTitleDiv.classList.contains('collapsed')) {
-                    groupTitleArrow.classList.remove('arrow-down');
-                    groupTitleArrow.classList.add('arrow-down');
-                } else {
+                    const index = expandedSections.indexOf(groupTitleId);
+                    if (index !== -1) {
+                        expandedSections.splice(index, 1);
+                    }
                     groupTitleArrow.classList.remove('arrow-down');
                     groupTitleArrow.classList.add('arrow-right');
+                } else {
+                    expandedSections.push(groupTitleId);
+                    groupTitleArrow.classList.remove('arrow-right');
+                    groupTitleArrow.classList.add('arrow-down');
                 }
             });
-
+    
             const groupQuestionLink = document.createElement('a');
-            // console.log('groupTitleDiv.id:', groupTitleId);
             groupQuestionLink.href = '#' + groupTitleId;
             groupQuestionLink.style.color = '#740fd6';
-
-            // Add a click event listener to toggle highlighting and boldness
+    
             groupQuestionLink.addEventListener('click', function () {
                 if (currentlyHighlightedElement !== null && currentlyHighlightedElement !== groupQuestionLink) {
-                    // Remove highlight from the previously highlighted element
                     currentlyHighlightedElement.style.fontWeight = 'normal';
                 }
-
+    
                 if (currentlyHighlightedElement === groupQuestionLink) {
-                    // Toggle highlight on the current element
                     groupQuestionLink.style.fontWeight = groupQuestionLink.style.fontWeight === 'bold' ? 'normal' : 'bold';
                 } else {
-                    // Make the text bold
                     groupQuestionLink.style.fontWeight = 'bold';
-                    // Update the currently highlighted element
                     currentlyHighlightedElement = groupQuestionLink;
                 }
             });
-
-            // Check if the group_title is longer than 20 characters
+    
             if (nodeData.group_title.length > 20) {
                 groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title.substring(0, 20) + '..');
             } else {
                 groupQuestionLink.innerHTML = removeParagraphTags(nodeData.group_title);
             }
             groupTitleDiv.appendChild(groupQuestionLink);
-
-            const groupQuestionsDiv = document.createElement('div');
-            groupQuestionsDiv.className = 'content';
+    
+            
             nodeData.questions.forEach(groupQuestion => {
                 createTreeNode(groupQuestion, groupQuestionsDiv);
             });
@@ -217,8 +232,12 @@ function navpane() {
         }
     }
 
-    const questionPaperContainer = document.getElementById('questionPaper');
+    var questionPaperContainer = document.getElementById('questionPaper');
+    
     createTreeWithHeading(jsonData, questionPaperContainer);
+    localStorage.setItem("collapse", JSON.stringify((expandedSections)));
+    console.log('expandedSections:',expandedSections);
+    console.log('questionPaperContainer:',questionPaperContainer);
 
 		window.addEventListener('DOMContentLoaded', event => {
 			// Toggle the side navigation